Как приготовить округлый шестигран с псевдо-элементами на клип-пате? [дублировать] ⇐ CSS

[Anonymous]

Вот код из того, что у меня есть до сих пор. : < /p>
:root {
--h: 100px;
--bg: rgb(101, 213, 198);
}

.hx {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--h);
min-width: calc((var(--h) / sqrt(3)));
/* aspect-ratio: 1/cos(30deg); */
background: var(--bg);
position: relative;
left: 29px;
border-radius: 2px;

&::before,
&::after {
border-radius: inherit;
content: "";
z-index: -1;
position: absolute;
top: 0;
clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
height: 100%;
aspect-ratio: 1 / cos(30deg);
}

&::after {
background: var(--bg);
right: calc((100px / sqrt(3)) / -2);
}

&::before {
background: var(--bg);
left: calc((100px / sqrt(3)) / -2);
}
}

span {
color: white;
padding: 0.5rem;
font-size: 3.5rem;
text-align: center;
font-family: monospace;
font-weight: 700;
display: flex;
align-items: center;
height: 100%;
}



Подробнее здесь: https://stackoverflow.com/questions/794 ... -clip-path