Полигона граница кнопки с прозрачным фоном ⇐ Html

[Anonymous]

Я пытаюсь придать форму полигона, подобную изображению ниже, но с прозрачным фоном. В коде в общей сложности 28 баллов. Сначала из точки слева в направлении по часовой стрелке, затем из той точки в направлении против часовой стрелки. < /P>

Код: Выделить всё

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.p-button{
text-decoration: none;
background: transparent;
color: white;
padding: 14px 50px;
text-transform: uppercase;
font-family: "Poppins";
border: solid 1px black;
border-radius: 30px;
font-size:12px;
--b: 1px; /* border width */
--h:25px; /* this is half the height, adjust it based on your code */
clip-path:polygon(

/* 1st to 14th point in anticlockwise direction */
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%,

/* 15th to 28th point in anticlockwise direction */
calc((0.134*var(--h)) + var(--b))  75%,
calc((0.5*var(--h)) + var(--b))  93.3%,
var(--h) calc(100% - var(--b)),
calc(100% - var(--h)) calc(100% - var(--b)),
calc(100% - (0.5*var(--h) + var(--b)))   93.3%, /* 93.3% = 100% - 6.7% */
calc(100% - (0.134*var(--h) + var(--b))) 75%,
calc(100% - var(--b)) 50%,
calc(100% - (0.134*var(--h) + var(--b))) 25%,
calc(100% - (0.5*var(--h) + var(--b)))   6.7%,
calc(100% - var(--h)) var(--b),
var(--h) calc(0px + var(--b)),
calc(  (0.5*var(--h)) + var(--b))  6.7%,  /* 6.7% = 0.134/2 * 100% */
calc((0.134*var(--h)) + var(--b))  25%,   /* 0.134 = 1 - cos(30)   */
var(--b) 50%) ;
}

body{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;

}< /code>
Demo it

The code I took reference for the button with background color (not transparent) is from this link.

Код: Выделить всё

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.p-button{
text-decoration: none;
background: #000;
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;

}< /code>
Demo it

Подробнее здесь: https://stackoverflow.com/questions/685 ... background