Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

202
Visualizações
Polygon border / border radius of a button

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>

over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

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>

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda