Верстка нетривиального вида блока?

Question

[DoSP]

Камрады, как заверстать такое Joxi чудо. Особо интересует картинка в гексагоне с бордером. Пробовал через transition: rotate, но рендеринг краев выходит зернистый Joxi2. Копал также в сторону svg, но так и не понял как там картинку накинуть на шестиугольный полигон.

Answer 1

[Денис Инешин]

Возможно вам поможет эта статья

Answer 2

[Кирилл]

csshexagon.com - Можно начать с этого, если проблема именно в гексагоне. Там есть чекбоксы для включения бордера и изображения, суть можно понять. Ну а полоски просто через before и after спозиционировать.

Comments

[DoSP]

проблема в нем, но не в самом построении а в том, что при применении "трансформ"(так как в вашей ссылке) браузер рендерит немножко по-другому и видно зернистость "ребер" гексагона а это не очень ок

Answer 3

[Nikolay Talanov]

codepen.io/suez/pen/14fc61c2e5f637b27464dab3c3ca8ad9 - топорный вариант сделанный на коленке. Координаты path полигона юзаются в clippath и в path с нужным вам stroke и stroke-color.
В современных браузерах (кроме ие и еще каких-то инвалидов) можно юзать css clip-path, вот примеры codepen.io/dubrod/details/myNNyW