Не обычная фигура на CSS, похожего в поиске ничего не нашел, есть возможность такое нарисовать CSS?

Question

[Alex Polyakh]

Очень много таких фигур в макете, с точки зрения производительности не хочется использовать очень много таких картинок (отличие только по ширине), нашел только квадраты, треугольники на CSS. Кружочек по правому краю прозрачный.

Answer 1

[Андрей Федоров]

codepen.io/aliencash/pen/GjXkaN
Хотя при больших значениях font-size могут наблюдаться артефакты.

Comments

[Максим]

красиво ! Greate

[Alex Polyakh]

Андрей Федоров, спасибо за работу и помощь!

Answer 2

[Олег]

Картинку с углом и в after засунь. Остальное border

Answer 3

[dom1n1k]

Если элемент фиксированного размера - достаточно просто одной картинки в фоне (и с т.з. производительности это намного лучше, чем несколько dom-элементов).
Если должен тянуться по ширине - все равно одна картинка, но там еще придется использовать один after.
Комбинировать слева бордеры, а справа картинку - плохая практика.

Answer 4

[jenovas]

А чем вас свг не устраивает?