Jak zrobić sześciokąt za pomocą CSS?

Question

Hej! Chcę zrobić taki sześciokąt za pomocą CSS:

Próbowałem za pomocą borderów pustych(transparent) ::before i ::after, ale nie dało się zrobić takich szerokich boków, ponieważ kiedy powiększałem po prostu zwiększały się rozmiary, ale "daszek się nie rozszerzał. Plus jak był tylko border-left i border-top to na końcach "daszek" zawijał się...
Pomyślałem o pentagramie w jednym kolorze i ustawieniu po prostu borderów - ale mam problem z wycentrowaniem tego. Niby jakoś na oko bym to zrobił, ale jak dam (na przykład) right: 50%; to nie daje tego na sam środek a chciałbym, żeby dokładnie było na środku.
Może źle to wykombinowałem i trzeba to zrobić inaczej?

Answer 1

Tak dla potomnych - gdyby ktoś czegoś takiego szukał to tu jest generator takich sześciokątów: https://codepen.io/wvr/pen/WrNgJp

Answer 2

https://css-tricks.com/examples/ShapesOfCSS/#hexagon

Do takich rzeczy jest SVG

Comments

Widziałem już to na CSS-TRICKS, ale nie jest to dokłądnie taki kształt jaki chcę.
Czyli dokładnie taki uzyskam tylko za pomocą SVG?

---

Z pewnością jest to optymalne rozwiązanie

(chyba, że jakość Cię nie interesuje - zawsze można png wstawić)

---

No ok. Postaram się ogarnąć temat SVG - bo będąc szczerym nie interesowałem się nigdy samą grafiką więc to będzie dość duże wyzwanie narysowanie czegoś takiego...
Tak czy tak - a co z :hover i ikonami w środku? Hover to będzie podmiana białego sześciokąta na purpurowy? I czy ikony też wstawić jako SVG?

---

svg {
  fill: white;
  transition: all 0.2s;
}

svg:hover {
 fill: violet;
}

I czy ikony też wstawić jako SVG?

wypadałoby

---

Aaa, widzę, że to SVG to bardziej skomplikowany temat niż po prostu narysowanie kształtu w Illustratorze i co najwyżej zmiana wysokości i szerokości img.
Dzięki!