Полый шестиугольник на HTML/CSS?

Question

[KuzmenkoArtem]

Нужен шестиугольник что бы был внутри прозрачен и была обводка.
Из того что я придумал https://jsfiddle.net/67bbotu6/
но там есть детали которые вылазят там где не нужно.

Прошу помочь если есть идеи как сделать или изменить мой.
Спасибо.

Answer 1

[Андрей Федоров]

Не понял, а где фигня-то? codepen.io/aliencash/pen/zqGzZd

Comments

[Serj-One]

Поддержу, но вместо 3-х дивов рациональней использовать 1 + псевдоэлементы.

[KuzmenkoArtem]

Serj-One: у меня просто пропорция прямоугольника не правильная получалась

[Андрей Федоров]

KuzmenkoArtem: Тут нужен расчет. Формулу поискать для правильного шестигранника в учебнике по геометрии... Хотя можно конечно просто подогнать...

Answer 2

[Алексей A]

Можно так:
csshexagon.com

Ещё можно искать на codepen по тегам codepen.io/tag/hexagon

А вообще, лучше использовать SVG для этих целей caniuse.com/svg-html5

А можно и так (как у вас, только кое-что исправить):

Comments

[KuzmenkoArtem]

оно все хорошо получается, но когда включаешь border и выключаешь background, то получается херня

[Алексей A]

KuzmenkoArtem: А почему не svg тогда? caniuse.com/svg-html5

Answer 3

[Bukinator]

или через path

Comments

[dimioo]

Четко, спасибо за ссылку) Но там немного неправильной формы. Правильный шестиугольник будет с такими процентами: 25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%