Как реализовать это силами CSS

Question

Есть такие раскладки-сетки (блоки просто залиты разными цветами, что бы было понятно где какой блок)

Разметка:

<section class="block__main">
  <div class="block__top">
  </div>
  <div class="block__middle">
   сы<div class="block__left"></div>
   <div class="block__right"></div>
  </div>
  <div class="block__bottom">
  </div>
</section>

Разметка:

<section class="block__main">
  <div class="block__top">
  </div>
  <div class="block__middle">
  </div>
  <div class="block__bottom">
  </div>
</section>

Внутри этих блоков будет уже контент типо текстов и прочее, его я смогу спозиционировать. Я не могу создать такого рода раскладку, что бы были все эти плавные линии. Смотрел в сторону clip-path, но во всех даже генераторах одни квадраты треугольники звезды, ничего плавного нет. Может кто-то сталкивался как можно это реализовать силами CSS?

Answer 1

Извращение конечно, но как самый простейший вариант. Пример:

* {
  margin: 0;
  padding: 0;
}

.block__main {
  width: 100%;
  overflow: hidden;
}

.block__top {
  width: 100%;
  padding-top: 50%;
  background: #800400;
}

.block__middle {
  width: 200%;
  padding-top: 50%;
  margin-left: -50%;
  margin-top: -20%;
  background: #800f80;
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-radius: 30% 100% 0 0;
}

.block__bottom {
  width: 200%;
  padding-top: 50%;
  margin-left: -50%;
  margin-top: -100px;
  background: #084040;
  border-top: 4px solid white;
  border-radius: 100% 100% 0 0;
  transform: rotate(0deg);
}

<section class="block__main">
  <div class="block__top">
  </div>
  <div class="block__middle">
  </div>
  <div class="block__bottom">
  </div>
</section>

* {
  margin: 0;
  padding: 0;
}

.block__main {
  width: 100%;
  overflow: hidden;
}

.block__top {
  width: 100%;
  padding-top: 50%;
  background: #fa1001;
}

.block__middle {
  position: relative;
  overflow: hidden;
  width: 200%;
  padding-top: 50%;
  margin-left: -50%;
  margin-top: -20%;
  background: #f729ff;
  border-top: 8px solid #f729ff;
  border-left: 8px solid #f729ff;
  border-right: 8px solid #f729ff;
  border-radius: 30% 100% 0 0;
}

.block__bottom {
  width: 200%;
  padding-top: 50%;
  margin-left: -50%;
  margin-top: -100px;
  background: #fffd81;
  border-top: 8px solid #22820c;
  border-radius: 100% 100% 0 0;
  transform: rotate(0deg);
}

.block__left,
.block__right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.block__left {
  left: 0;
}

.block__right {
  right: 0;
  background: #f2ddbf;
}

<section class="block__main">
  <div class="block__top">
  </div>
  <div class="block__middle">
    сы
    <div class="block__left"></div>
    <div class="block__right"></div>
  </div>
  <div class="block__bottom">
  </div>
</section>

БЛОГ НА HUSL

Как реализовать это силами CSS

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