0
201
VistasBorde de polígono/radio de borde de un botón
Estoy tratando de hacer que el borde del polígono tenga la forma de la imagen a continuación.
El código que he probado está abajo.
@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>
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
Usar 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>
·
Santiago Trujillo
Denunciar
Responde la pregunta