Как сверстать такой блок?

Question

[pet1987]

Нужно сверстать такой блок:



Думаю можно использовать CSS свойство border-bottom-left-radius. С помощью этого свойства скруглить нижний-левый угол. Но как сделать этот блок двухцветным и с вырезом по центру не знаю. Есть какое-нибудь решение?

Answer 1

[Максим]

Самое просто это открыть векторный редактор и нарисовать : https://codepen.io/topicstarter/pen/qBWxdGg

Comments

[pet1987]

Понял, Спасибо.
А не подскажите, в каком векторном редакторе лучше всего это делать на будущее?

[Максим]

pet1987, я делал в inkscape но можно corel draw illustrator

Answer 2

[Pavstyuk]

Создаешь в векторном редакторе такую картинку (Inkscape, например) по размерам блока, или просто по соотношению сторон блока. И прописываешь в стилях background: url("путь/картинка.svg") 50% 50% no-repeat; background-size: cover; С позицией фона можно поэкспериментировать. Можно создать обычный png вместо svg, но вектор будет легче.

Answer 3

[cgwic]

Можно так
Не идеально, но как пример
Быстрее и нагляднее конечно через SVG