Как добавить границу шестиугольнику?

Question

[Super Star]

Здравствуйте. Есть у меня шестиугольник и по нему у меня несколько вопросов jsfiddle.net/m00qot3L

Во-первых о позиционировании. Находится он в бутстраповском контейнере. Используя margin 0 auto он не никак не хочет выравниваться по центру. Я исспользовал flex контейнер и выровнял контент по центру. Можно так сделать? Просто вся эта конитель с кросбраузерностью....

Во-вторых нужно шестиугольнику задать границу. Я её задал, но то что получилось ... Как сделать её цельной т.е. без промежутков?

Comments

[BigKompot]

А не проще отрисовать его с помощью SVG?

[Super Star]

BigKompot: вообще ничего про SVG не знаю

[BigKompot]

Андрей Рысь: https://codepen.io/wvr/pen/WrNgJp https://codepen.io/cwmanning/pen/Hugye

[Super Star]

BigKompot: Посмотрите что наваял https://jsfiddle.net/eL9jmghj/ как адаптивить такую секцию? Ничего найти по этому поводу не могу

[BigKompot]

Андрей Рысь: что ты подразумеваешь под "адаптивить"?

[Super Star]

BigKompot: Обычную адаптивность страницы. Под разные разрешения. Не может же эта секция https://habrastorage.org/files/a31/813/204/a318132... на всех разрешениях быть такой как на макете.

[BigKompot]

Андрей Рысь: SVG - это изображение, только не растровое, как JPG или PNG, а растровое. Следственно масштабируется без потери качества. Обращайся с ним как с изображением.
P.S. От себя могу посоветовать пройти курс по SVG на htmlacademy (https://htmlacademy.ru/courses/130)

Answer 1

[Олег]

Я бы половину того. что у тебя выкинул и так сделал ;) https://jsfiddle.net/joomla/ar0qnzh9/

Answer 2

[Александр Алексеев]

граница - filter: drop-shadow()