Как сверстать подобную фигуру?

Question

[sergey]

Как вот это сверстать:

треугольные вырезы не проблема, а вот полукруги не пойму как

Answer 1

[iBird Rose]

ну если фон белый будет то просто before и after круги(border-radius: 50%) поставленные на эти места. с z-index больше чем у блока
p.s. чтобы border у кругов был нормальным, надо через transform rotate повернуть их на 45 градусов

upd: косячно получается когда бордер для кругов) https://jsfiddle.net/e3me1zq1/

Comments

[Ankhena]

Надо остальные границы у кругов задать белым и чуть подправить позиционирование
https://jsfiddle.net/923dhpLj/

[iBird Rose]

Ankhena W: а я уже сделал правые бордеры отдельным элементом) тоже норм получилось) https://jsfiddle.net/e3me1zq1/1/

[iBird Rose]

Ankhena W: но твой вариант точно лучше)

[sergey]

Ankhena W: спасибо!

Answer 2

[dom1n1k]

Боже, опять какие-то танцы с костылями и трансформациями. Вас проклянет тот, кто потом будет разбираться с вашим мегакодом.
Это делается одной картинкой! Даже если фигуру нужно тянуть по ширине - всё равно достаточно одной картинки.