Как придать div вот такую форму?

Question

[NoobKoder]

В стилизации я как рыба в пустыне, и вот собственно вопрос:


Я уже смирился, что это вряд ли будет цельная фигура, но даже с учётом этого адекватно выстроить такой блок у меня не получилось (и главная проблема – вот это пресловутое внутреннее закругление)

Comments

[Pavstyuk]

Вам обязательно div? Обычный path подойдет?

[Вадим]

svg на фон и падинг снизу покрывающий выезжающую часть

Answer 1

[black1277]

Вот накидал по быстрому для примера

Этот способ удобен тем, что можно сделать край любой формы, в зависимости от того какой svg использовать. Недостаток в том, что бордер можно только через drop-shadow сделать.

Comments

[NoobKoder]

Я сейчас освобожусь, гляну внимательнее на код. На самом деле я не дописал свой вопрос. Суть в том, что нижний выступ это вспомогательный блок управления для основного контента в верхнем и при необходимости он может плавно занимать весь низ создавая стандартный прямоугольник с закруглёнными краями.

Я сегодня ещё поморочился и сделал основу с blur&contrast в подобном духе:

<div id= "content_block">
  <div id= "gooey">
    <div id= "first_block"></div>
    <div id= "second_block"></div>
  </div>
  <div id= "content"></div>
</div>
<style>
  #gooey {
    background-color: white;
    filter: blur(10px) contrast(20);
    ...
  }
  #first_block {
    background-color: black;
    ... 
  }
  #second_block {
    background-color: black;
    ... 
  }
  #content {
    z-index: 1;
    ... 
  }
</style>

Не помню точно, но что-то вроде этого. В общем в таком случае, взаимодействуя с элементом, действительно можно получить плавную "жидкую" отрисовку и перемещение. Проблем такого варианта много, но основные, что весь контент будет в отдельных блоках расположенных поверх вот этих липких блоков, отсутствие бордеров, и также проблемы с фоном.
Если с svg вставками результат окажется удобнее и практичнее, то будет вери гуд

[NoobKoder]

Как минимум в вашем случае можно вставлять в блок контент, что уже куда удобнее

[cssfish]

при открытии вкладки html/css блок разваливается надвое

[black1277]

cssfish, да там нужно подбирать высоту градиента через медиа под разную ширину.

Answer 2

[Михаил Р.]

https://qna.habr.com/q/1208950#answer_2236396

Answer 3

[NoobKoder]

Если кому ещё нужно, то на самом деле моя задача решается одним псевдоэлементом


Создаёте два блока, перед вторым (нижним) создаёте прозрачный скругленный ::before, накладываете тень под цвет бэка.
Если нужны рамки, этим методом всё так же прекрасно решается. Удачи)

Answer 4

[cssfish]

вырезка через clip-path, закругление потом через svg #round . Правда, не везде это хорошо смотрится