Как можно создать эффект волнистого внутреннего скругления у блока с использованием CSS?

Для создания эффекта волнистого внутреннего скругления у блока можно использовать псевдоэлементы ::before и ::after с абсолютным позиционированием и поворотами.

Пример CSS кода для создания волнистого внутреннего скругления:

```css
.wave-border {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.wave-border::before,
.wave-border::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.wave-border::before {
  background-color: #e6e6e6; /* цвет основного содержимого */
  transform: rotate(45deg);
  transform-origin: left bottom;
}

.wave-border::after {
  background-color: #f1f1f1; /* цвет фона */
  transform: rotate(-45deg);
  transform-origin: right bottom;
}
```

```html
<div class="wave-border"></div>
```

В данном примере псевдоэлементы ::before и ::after имеют абсолютное позиционирование и занимают всю площадь блока (.wave-border). Повороты элементов создают эффект волнистого внутреннего скругления. Дополнительно, можно настроить цветовую гамму для фона и основного содержимого блока.

Обратите внимание, что в данном примере применяются фиксированные углы поворота 45 градусов и -45 градусов. Вы можете экспериментировать с этими значениями, чтобы достичь желаемого эффекта.

Никогда раньше я не пробовал такого подхода, но кстати, увидев макеты, у меня возник вопрос. Сейчас я решил попробовать экспериментировать и у меня получилось довольно костыльно. Мой подход работает, если фон белый или однородный по цвету. Однако, при изменении ширины экрана, все элементы остаются на своих местах. Вот пример моего кода на CodePen: ссылка