Как верстать элемент нестандартной формы?

Question

[ravlex]

В макете есть вот такой элемент со стрелкой:

Собственно интересует верстка самой стрелки. Мне на ум приходят только полигоны и размещение объекта картинкой. Как лучше и правильнее верстать в данном случае?

Answer 1

[trushka]

Можно использовать ::before и ::after с абсолютным позиционированием, z-index: -1 и transform

a::before {transform: rotateY(20deg)} /*трапеция*/
a::after{transform: rotate(45deg); border: 1px dotted #fff} /*стрелочка*/

Ну, естественно, их надо правильно расположить, задать нужные размеры и perspective самому элементу

Answer 2

[Алексей Николаев]

Хрень с тенью (трапецию) можно сверстать через псевдоэлементы и border, а стрелку я бы сделал изображением (svg - наиболее верный способ; проще - png). Верстать это чистым css можно, но слишком геморно и не стоит свеч.

Но если вам так надо, берете один div с двумя псевдоэлементами - вот вам уже 3 квадратика, остальные добавляете при помощи box-shadow без размытия и с соотв. смещением по осям.