RT
Все инструменты
На главную

CSS-эффекты и графика

Разделители секций

Волна, скос, книга и капли на стыке двух блоков. Форма переворачивается по обеим осям, на выходе — SVG и готовая строка CSS.

Форма

Как это ляжет на страницу

Верхняя секция страницы
Разделитель секций
Нижняя секция страницы

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" width="1440" height="120" preserveAspectRatio="none">
  <path fill="#6366f1" d="M 0 51.64 C 15 48.38, 60 36.73, 90 32.13 C 120 27.53, 150 24.38, 180 24.04 C 210 23.7, 240 26.06, 270 30.09 C 300 34.13, 330 41.2, 360 48.25 C 390 55.3, 420 64.7, 450 72.39 C 480 80.08, 510 88.64, 540 94.37 C 570 100.11, 600 104.95, 630 106.8 C 660 108.65, 690 108.13, 720 105.47 C 750 102.81, 780 97.11, 810 90.84 C 840 84.56, 870 75.6, 900 67.83 C 930 60.06, 960 50.86, 990 44.21 C 1020 37.56, 1050 31.22, 1080 27.94 C 1110 24.65, 1140 23.31, 1170 24.49 C 1200 25.67, 1230 29.78, 1260 35.03 C 1290 40.29, 1320 48.46, 1350 56.02 C 1380 63.57, 1425 76.31, 1440 80.36 L 1440 120 L 0 120 Z"/>
</svg>

CSS для блока

.section-divider {
  height: 120px;
  background-color: #f8fafc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' width='1440' height='120' preserveAspectRatio='none'%3E %3Cpath fill='%236366f1' d='M 0 51.64 C 15 48.38, 60 36.73, 90 32.13 C 120 27.53, 150 24.38, 180 24.04 C 210 23.7, 240 26.06, 270 30.09 C 300 34.13, 330 41.2, 360 48.25 C 390 55.3, 420 64.7, 450 72.39 C 480 80.08, 510 88.64, 540 94.37 C 570 100.11, 600 104.95, 630 106.8 C 660 108.65, 690 108.13, 720 105.47 C 750 102.81, 780 97.11, 810 90.84 C 840 84.56, 870 75.6, 900 67.83 C 930 60.06, 960 50.86, 990 44.21 C 1020 37.56, 1050 31.22, 1080 27.94 C 1110 24.65, 1140 23.31, 1170 24.49 C 1200 25.67, 1230 29.78, 1260 35.03 C 1290 40.29, 1320 48.46, 1350 56.02 C 1380 63.57, 1425 76.31, 1440 80.36 L 1440 120 L 0 120 Z'/%3E %3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}