Переходы между блоками

Копировать.block-top {
  position: relative;
  background: #3b1d8a;
}
.block-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 60px;
  background: #0f3460; /* цвет след. блока */
  clip-path: polygon(
    0 100%,
    100% 0,
    100% 100%
  );
}

Копировать.block-top {
  position: relative;
  background: #0e4d40;
}
.block-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 60px;
  background: #1a3a5c;
  clip-path: path(
    'M 0 60 Q 85 0 170 40
     Q 255 80 340 30
     Q 425 0 510 40
     L 510 60 Z'
  );
}

Копировать.block-top {
  position: relative;
  background: #4a1942;
}
.block-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 40px;
  background: #1c3a4a;
  clip-path: polygon(
    0% 100%, 5% 0%, 10% 100%,
    15% 0%, 20% 100%, 25% 0%,
    30% 100%, 35% 0%, 40% 100%,
    45% 0%, 50% 100%, 55% 0%,
    60% 100%, 65% 0%, 70% 100%,
    75% 0%, 80% 100%, 85% 0%,
    90% 100%, 95% 0%, 100% 100%
  );
}

Копировать.block-top {
  position: relative;
  background: #1e3a5f;
}
.block-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 50px;
  background: #3d1e5f;
  clip-path: polygon(
    0 0,
    50% 100%,
    100% 0,
    100% 100%,
    0 100%
  );
}

Копировать.block-top {
  position: relative;
  background: #1a4a2e;
}
.block-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 60px;
  background: #4a2a1a;
  /* выпуклая дуга */
  clip-path: ellipse(
    55% 100% at 50% 100%
  );
}

Копировать.block-top {
  position: relative;
  background: #3a1a4a;
}
.block-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 60px;
  background: #1a3a4a;
  /* вогнутая дуга */
  clip-path: path(
    'M 0 0 Q 255 120 510 0
     L 510 60 L 0 60 Z'
  );
}

Копировать.block-top {
  position: relative;
  background: #4a3a1a;
}
.block-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 40px;
  background: #1a2a4a;
  clip-path: polygon(
    0% 60%, 3% 20%, 7% 55%,
    11% 10%, 15% 50%, 19% 5%,
    23% 45%, 27% 15%, 31% 55%,
    36% 8%, 40% 48%, 44% 18%,
    48% 58%, 52% 12%, 56% 52%,
    60% 22%, 64% 60%, 68% 10%,
    72% 50%, 76% 5%, 80% 45%,
    84% 20%, 88% 55%, 92% 10%,
    96% 48%, 100% 20%,
    100% 100%, 0% 100%
  );
}

Копировать.block-top {
  position: relative;
  background: #1a4a3a;
}
.block-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 60px;
  background: #4a1a3a;
  clip-path: polygon(
    0 100%,
    50% 0,
    100% 100%
  );
}

Копировать/* CSS */
@keyframes wave {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.wave-divider {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px; overflow: hidden;
}
.wave-divider svg {
  position: absolute; bottom: 0;
  width: 200%; height: 100%;
  animation: wave 4s linear infinite;
}

/* HTML */
<div class="block-top">
  <div class="wave-divider">
    <svg viewBox="0 0 1200 70"
         preserveAspectRatio="none">
      <path d="M0,35 C150,70 350,0
        600,35 C850,70 1050,0
        1200,35 L1200,70 L0,70 Z"
        fill="#цвет-след-блока"/>
      <path d="M0,35 C150,70 350,0
        600,35 C850,70 1050,0
        1200,35 L1200,70 L0,70 Z"
        fill="#цвет-след-блока"
        transform="translate(600,0)"/>
    </svg>
  </div>
</div>

Копировать.block-top {
  position: relative;
  background: #202060;
}
.block-top::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 0; right: 0;
  height: 80px;
  /* от цвета верхнего
     к цвету нижнего блока */
  background: linear-gradient(
    to bottom,
    #202060,
    #602020
  );
  z-index: 1;
}

Копировать.block-top {
  position: relative;
  background: #0a3a2a;
}
.block-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 50px;
  background: #2a0a3a;
  clip-path: polygon(
    0 0,
    20% 0, 20% 50%,
    40% 50%, 40% 0,
    60% 0, 60% 50%,
    80% 50%, 80% 0,
    100% 0, 100% 100%,
    0 100%
  );
}

Копировать/* HTML */
<div class="block-top">
  <div class="brush-divider">
    <svg viewBox="0 0 500 70"
      preserveAspectRatio="none">
      <path d="M0,20 C40,5 80,40
        130,15 C180,-5 220,45
        280,20 C330,0 370,50
        430,18 C460,8 490,30
        500,20 L500,70 L0,70 Z"
        fill="#цвет-след-блока"/>
    </svg>
  </div>
</div>

/* CSS */
.brush-divider {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px; overflow: hidden;
}
.brush-divider svg {
  width: 100%; height: 100%;
  display: block;
}