Как сверстать бантик на css?

Question

[AhmedGasem]

Дизайнер дал сверстать грузовик с таким бантиков на крыше,вот только у меня с бантиком проблемы теперь =(
Хотел попробовать через svg,но этот гавнарь дал мне этот объек как целую картину(ну могу экспортировать отдельно)
Буду очень благодарен=)

Comments

[sergey]

img тебе в помощь

[d'Ivan]

На бант не похоже ☺

Answer 1

[iBird Rose]

ну тк делай картинкой. в чем проблема. элемент то не участвует в интерфейсе сайта. значит можно не верстать, а просто картинкой вставить

Answer 2

[riot26]

Если грузовик картинкой, то зачем надо было отрезать от него бант? Однозначно картинкой, оно не стоит того, чтобы рисовать в svg или изворачиваться с css.

Answer 3

[trushka]

А в чём проблема нарисовать в том же инкскейпе? 2 круга, прямоугольник и 2 трапеции (polygon) - расширения от прямоугольника к кругам. А вообще, у дизайнера в формате svg попросить - вроде уже даже фотошоп такие фигурки так сохранять умеет

Хотя, можно и на css, даже одним элементом: собственно, прямоугольничек в центре - сам элемент, с background-origin: content-box и толстыми border-left и border-right и прозрачным border-top (расширяющиеся прямые участки по бокам), а закругления - скруглённые квадратные ::before и ::after