Как сверстать стрелочки в макете?

Question

[makboriska]

Есть макет в работе, но мне жутко не нравится что нужно верстать эти стрелки (см. скрин).
Думал может фоном сделать блока, но при адаптации получается беда.. ладно ещё б одно место было со стрелками так весь макет.. посоветуйте как можно их сделать правильно... Заранее спасибо

Comments

[Ankhena]

Градиентами, псевдоэлементами, SVG... вариантов довольно много.

Чтобы не было проблем при адаптиве, можно использовать относительные единицы измерения и calc.

[Сергей Сергей]

это так, proof of concept.

Answer 1

[Vladislav]

Единственное, что приходит в голову это сделать дополнительно два блока и задать им стили border-left border-top и правому border-top border-right, а стрелки каждому сделать просто внизу after и before, тогда эти псведо линии стрелок будут сжиматься

Comments

[Антон Литвиненко]

можно чуть расширить идею
берем левую карточку, ей релатив
к ней заводим before
width 50%
left: 50%
height: скольку нужно
border: top left
и делаем еще из квадратного after стрелочку

[makboriska]

Антон Литвиненко,

спасибо! Сделал как вы написали да это удобно и нет гемора!