6

I am trying to make polygon border shape like image below.

poygon border button background

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Foss Bytes
  • 97
  • 1
  • 6

1 Answers1

4

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 1
    I had no idea this can be achieved via clip-path. Thank you, it works. Is there any way to understand what and how the code does achieve it? – Foss Bytes Jul 24 '21 at 09:57
  • 1
    @FossBytes your shape is made with 14 points so I simply specified each point inside the clip-path, everything else is math related. I have added details about some specific values. Not sure if you are familiar with Math or not but if you do you can easily understand the logic if you follow the code point by point – Temani Afif Jul 24 '21 at 10:04
  • In case we need a transparent background with an exact polygon border of `var(--borderwidth)`. How can i do that? – Foss Bytes Jul 25 '21 at 12:13
  • @FossBytes you will need a complete different code, the above one will not help you – Temani Afif Jul 26 '21 at 09:14