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