CSS: вогнутый угол у DIV с помощью border-radius. Реально?

поскольку можно сделать то что на рис 1, то можно сделать два дива.

один прямоугольник а другой - рис1. и наложить его поверх первого

lutskboy, забыла дописать, "клеточки" - это прозрачность. На их месте должно просвечиваться то, что находится под фигуркой (DIV).

https://jsfiddle.net/9en5pyao/

<div class='concave'>

    <div class='rightconcave'></div>

</div>

div.concave {

    background:green;

    width:150px;

    height:150px;

    position:relative;

}



div.rightconcave {

    position:absolute;

    background:white;

    width:150px;

    height:150px;

    bottom:0;

    left:0;

    border-top-left-radius:500px;

}

То, что под фигуркой..

https://jsfiddle.net/pgq54d7y/

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

Вообще, раньше для такого обычные прозрачные png-шки использовались..

Основной блок - как есть.. (при необходимости "пилится" на несколько составных) а место "прозрачности" отрисовывается PNG-шкой и позиционируется "как нужно"

Тоже думала на счёт PNG прозрачного, чтобы его наложить сверху можно было. Но проблемки начинаются, если у элемента динамические высота с шириной... Картинку тогда нужно заблаговременно достаточно большого размера вставлять и сплюскивать её под размеры уголка. Иначе "поплывут" её границы (чёткость потеряют), особенно на ретинах всяких.

slavegirl:
Тоже думала на счёт PNG прозрачного, чтобы его наложить сверху можно было. Но проблемки начинаются, если у DIV динамические высота с шириной... Картинку тогда нужно заблаговременно достаточно большого размера вставлять и сплюскивать её под размеры уголка у DIV. Иначе "поплывут" её границы (чёткость потеряют), особенно на ретинах всяких.

4 пнгшки абсолютные 🤪

ziliboba0213, можно ещё на canvas всё нарисовать (вместо PNG со статическим цветом фона и размерами). Но хотелось бы найти этот волшебный параметр для border-radius (а может быть что-то другое?), чтобы фигурку такую получить из залитого фоном DIV.

Разве нету такого? Я видела, на Хабре рисовали всплывашки с вогнутыми боками. Но уголков так и не нашла, увы.

Посмотрите в сторону SVG

p.s. Или так:

https://stackoverflow.com/questions/11033615/inset-border-radius-with-css3

https://css-tricks.com/scooped-corners-in-2018/

http://dabblet.com/gist/10168919 во че нашел 🍿

Как я понял, вот это за углы отвечает :)

div.round {
	background-image:
		radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
		radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
		radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
		radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}

div.round {
	background-image:
		radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
		radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
		radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
		radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}

ziliboba0213, Вы умничка!

Это то, что я искала! А я, блин, дурочка, думала, что нужно через border-radius всё делать...

И ещё важное там, насколько я поняла, вот это:

А если указать одинаковые координаты (15px и 15px), то сглаживание у полукруга вообще пропадает.

ivan-lev, спасибо и Вам большое за подсказки! Вы мне очень быстро помогли.