Как с помощью CSS сделать на блоке закругление другого цвета?

Question

[ayapergenov]

Прошу подсказать как проще реализовать декоративное закругление на левой стороне блока.
Думаю сделать двумя кругами, края которых будут создавать такой вид с помощью z-index. Но как то громоздко и сложно получается. Может есть более изящное решение у кого?

Answer 1

[teotlu]

Примерно вот так — подходит?

Comments

[ayapergenov]

Красота! Спасибо...

[teotlu]

ayapergenov: всегда пожалуйста) Только учитывайте, что основному блоку z-index нельзя задавать, иначе на псевдоэлементе z-index: -1 не подействует, как надо, кружок будет не под блоком, а над ним. А вот блоку-родителю этих блоков надо задать z-index, чтобы кружок c z-index: -1 не провалился под него.

[teotlu]

ayapergenov: вот пример:
jsfiddle.net/dmfxna5h/2 — кружок провалился под блок articles-list
jsfiddle.net/dmfxna5h/3 — добавили z-index, и всё в порядке.

[teotlu]

ayapergenov: jsfiddle.net/dmfxna5h/4 — а z-index на самом блоке всё ломает, потому что кружок не проваливается под блок.

[ayapergenov]

teotlu: Почему кружок не прячется за фоновый блок right-column?
codepen.io/mathetes/pen/BNRqrr

[teotlu]

ayapergenov: у вас он вообще непонятно где, и его не видно из-за overflow: hidden на заголовке: joxi.ru/1bmoW8BH7jpwmy . Уберите overflow: hidden и подвиньте :)

[teotlu]

ayapergenov: а не проваливается потому, что нет бэкграунда у колонки. Он как бы проваливается, вы просто это не видите:
joxi.ru/QeAO7n5C671LAo
joxi.ru/Ra2X3J7hl7nRmg

[ayapergenov]

teotlu: Спасибо. Помогло!