Menu
I am trying to make polygon border shape like image below.
The code i have tried is below.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.p-button{
background: transparent;
text-decoration: none;
background: #5344c6;
color: white;
padding: 15px 50px;
border-radius: 27px;
text-transform: uppercase;
font-family: "Poppins";
letter-spacing: 0.5px;
}
body{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}<a class="p-button" href="">Explore The Tech</a>
531
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
Your problem is unrelated to how you have set border-radius . Fire up Chrome and hit Ctrl+Shift+j and inspect the element. Uncheck width and the border will have curved corners. Show activity on this post.
You are using different Font sizes in buttons that's why buttons border radius is looking different, You can solve this issue using border-radius : 60px; in both buttons css and if you want to set same height you can use min-height.
Introduction to CSS Button Border In this article, we are discussing button borders in CSS. In general, a button is a clickable event that is used in elements for which when we click on the button it will take to another page or element or some other action to be performed. In this article, let us see how the borders are applied to the buttons.
In order to achieve the polygon border, I am going to rely on a combination of the CSS clip-path property and a custom mask created with the Paint API. We start with a basic rectangular shape. We apply clip-path to get our polygon shape. Nothing complex so far but note the use of the CSS variable --path.
Definition and Usage. The border-radius property defines the radius of the element's corners. Tip: This property allows you to add rounded corners to elements! This property can have from one to four values. Here are the rules:
Use clip-path:
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.p-button{
background: transparent;
text-decoration: none;
background: #5344c6;
color: white;
padding: 15px 50px;
text-transform: uppercase;
font-family: "Poppins";
font-size:40px;
--h:45px; /* this is half the height, adjust it based on your code */
clip-path:polygon(
0 50%,
calc(0.134*var(--h)) 25%, /* 0.134 = 1 - cos(30) */
calc( 0.5*var(--h)) 6.7%, /* 6.7% = 0.134/2 * 100% */
var(--h) 0,
calc(100% - var(--h)) 0,
calc(100% - 0.5*var(--h)) 6.7%,
calc(100% - 0.134*var(--h)) 25%,
100% 50%,
calc(100% - 0.134*var(--h)) 75%,
calc(100% - 0.5*var(--h)) 93.3%, /* 93.3% = 100% - 6.7% */
calc(100% - var(--h)) 100%,
var(--h) 100%,
calc( 0.5*var(--h)) 93.3%,
calc(0.134*var(--h)) 75%);
}
body{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}<a class="p-button" href="">Explore The Tech</a>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
