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

Как правильно сверстать адаптивный блок необычной формы с вырезом в макете так, чтобы он подстраивался под содержимое по высоте и при этом сохранял пропорции сверху?
  • 14 июля 2024 г. 18:42
Ответы на вопрос 2
Для создания адаптивного блока с нестандартной формой и вырезом в макете можно использовать следующий подход:

1. Создать контейнер для блока с нестандартной формой и задать ему необходимую ширину и относительное позиционирование.

2. Для создания нестандартной формы блока можно использовать CSS-свойство clip-path. Например, вы можете использовать полигон или SVG-фигуру для создания нужной формы.

3. Для адаптивности блока по высоте можно использовать относительные единицы измерения, такие как % или vh. Также можно установить минимальную и максимальную высоту блока, чтобы он мог подстраиваться под содержимое, но сохранять свои пропорции.

4. Чтобы блок сохранял пропорции сверху при изменении размера окна браузера, можно задать соотношение сторон через псевдоэлементы или псевдоэлемент before и after.

Пример кода для создания адаптивного блока с нестандартной формой и вырезом:

```html
<div class="custom-block">
  <div class="content">
    <!-- Содержимое блока -->
  </div>
</div>
```

```css
.custom-block {
  width: 50%;
  position: relative;
}

.custom-block::before {
  content: '';
  display: block;
  padding-top: 60%; /* Задаем соотношение сторон блока */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
  /* Положение и форма блока */
}
```

Этот код создаст адаптивный блок с нестандартной формой и вырезом, который подстраивается под содержимое по высоте и сохраняет пропорции сверху. Вы можете настроить размеры и форму блока под свои нужды, используя различные CSS-свойства и техники.
Как уже в комментариях писали, можно сделать максой с радиальным градиентом, накинул пример, а тень с помощью фильтра drop-shadow() : 
Похожие вопросы