Как верстать блок необычной формы адаптивно?

Question

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

Answer 1

например как то так...

#y {
  position: relative;
  border-radius: 25% 25% 5% 5% / 45% 30% 5% 5%;
  padding: 35% 5% 5% 5%;
  background: radial-gradient(circle closest-side at 50% 10%, transparent 0%, transparent 350%, gray 350%, gray 600%, green 900%);
  /* прозрачный круглешок (дырка). подробнее там:
  https://webref.ru/css/value/radial-gradient
  */
  filter: drop-shadow(0 0 10px black) drop-shadow(0 0 10px black);
  aspect-ratio: 2/1; /* !!!!!!!!!!! фиксация пропорций блока(условная
     - пока в нём хватает места под содержимое)*/
}

#y:before {
  border-radius: 50%;
  content: '';
  background: url(https://cdn.sstatic.net/Sites/ru/Img/favicon.ico?v=92117f9cb35c);
  border: 3px solid violet;
  display: inline-block;
  width: 50%;
  aspect-ratio: 1/1;
  position: absolute;
  top: -22%;
  left: 24%;
}

#x {
  height: 200px;
  width: 200px;
  border: 5px solid red;
  overflow: auto;
  resize: both;
  padding: 5em 1em 0 1em;
}

body {
  background: linear-gradient(to left, blue, violet, brown, orange, pink, silver, lime, aqua)
}

<div id='x'>
  <div id='y'>
    йцукен
  </div>
</div>

с подбором более подходящих размеров и форм думаю справитесь

форму "вилки" менять тут: #y{border-radius: * * 5% 5% / * * 5% 5%;}

ну или можно почитерить с clip-path

БЛОГ НА HUSL

Как верстать блок необычной формы адаптивно?

Ответы (1 шт):