<section class="one">
  <div class="one__container container">
    <div class="one__inner">
      <div class="one__content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum eveniet ratione beatae quae quos dicta perspiciatis possimus animi a. Placeat, doloribus corrupti aperiam fugit nihil autem ab ipsam delectus repellat quas saepe consequuntur ullam veniam omnis iste itaque ipsa obcaecati qui voluptatum, dolore laborum fuga? Voluptate numquam vel incidunt et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci ipsa fuga maiores. Deleniti aut libero corporis magni quibusdam dolore, sapiente autem eum expedita nam deserunt cumque beatae itaque sequi omnis!
      </div>
    </div>
  </div>
</section>

<section class="two">
  <svg class="two__bg">
    <defs>
      <linearGradient id="two__gradient" x1="100%" y1="0" x2="0" y2="100%" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#da1468"/>
        <stop offset="1" stop-color="#502379"/>
      </linearGradient>
      <mask id="two__mask--mobile" x="0" y="0" width="100%" height="100%">
        <rect width="100%" height="100%" fill="#fff" />
        <svg viewBox="0 0 576 9999" width="100%" height="100%" preserveAspectRatio="xMidYMin slice">
          <path d="M0,297s32.6-24.83,94-43c85.39-25.26,201-34.93,323-90C498.64,127.15,552.24,57.73,576,0V-2L0-1V297Z" />
        </svg>
      </mask>
      <mask id="two__mask--desktop" x="0" y="0" width="100%" height="100%">
        <rect width="100%" height="100%" fill="#fff" />
        <svg viewBox="0 0 576 300" width="100%" height="400" preserveAspectRatio="none">
          <path d="M0,297s32.6-24.83,94-43c85.39-25.26,201-34.93,323-90C498.64,127.15,552.24,57.73,576,0V-2L0-1V297Z" />
        </svg>
      </mask>
    </defs>
    <rect class="two__rect two__rect--mobile" mask="url(#two__mask--mobile)" fill="url(#two__gradient)" width="100%" height="100%" />
    <rect class="two__rect two__rect--desktop" mask="url(#two__mask--desktop)" fill="url(#two__gradient)" width="100%" height="100%" />
  </svg>

  <div class="two__container container">
    <div class="two__inner">
      <div class="two__content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis mollitia omnis ipsa, eos excepturi ut consectetur pariatur qui, nam facilis tempore sunt non. Praesentium optio repudiandae molestias corrupti reprehenderit sint laboriosam qui suscipit dignissimos facere dolor temporibus delectus quasi porro corporis deleniti possimus fuga odit cum aliquid, distinctio quidem aperiam ipsum tenetur! Ducimus debitis eos reprehenderit. Veritatis quasi quia ipsum?
      </div>
    </div>
  </div>
</section>

<section class="three">
  <svg class="three__bg">
    <defs>
      <linearGradient id="three__gradient" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#37deca"/>
        <stop offset="1" stop-color="#366897"/>
      </linearGradient>
      <mask id="three__mask--mobile" x="0" y="0" width="100%" height="100%">
        <rect width="100%" height="100%" fill="#fff" />
        <svg viewBox="0 0 576 9999" width="100%" height="100%" preserveAspectRatio="xMidYMin slice">
          <path d="M0,0C18,11,80,44,158,44c48,0,65-7,99-7,47,0,121,28,160,28,91,0,128,7.66,159,25V-2H0Z" />
        </svg>
      </mask>
      <mask id="three__mask--desktop" x="0" y="0" width="100%" height="100%">
        <rect width="100%" height="100%" fill="#fff" />
        <svg viewBox="0 0 576 90" width="100%" height="120" preserveAspectRatio="none">
          <path d="M0,0C18,11,80,44,158,44c48,0,65-7,99-7,47,0,121,28,160,28,91,0,128,7.66,159,25V-2H0Z" />
        </svg>
      </mask>
    </defs>
    <rect class="three__rect three__rect--mobile" mask="url(#three__mask--mobile)" fill="url(#three__gradient)" width="100%" height="100%" />
    <rect class="three__rect three__rect--desktop" mask="url(#three__mask--desktop)" fill="url(#three__gradient)" width="100%" height="100%" />
  </svg>

  <div class="three__container container">
    <div class="three__inner">
      <div class="three__content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis mollitia omnis ipsa, eos excepturi ut consectetur pariatur qui, nam facilis tempore sunt non. Praesentium optio repudiandae molestias corrupti reprehenderit sint laboriosam qui suscipit dignissimos facere dolor temporibus delectus quasi porro corporis deleniti possimus fuga odit cum aliquid, distinctio quidem aperiam ipsum tenetur! Ducimus debitis eos reprehenderit. Veritatis quasi quia ipsum?
      </div>
    </div>
  </div>
</section>
*, *::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.45;
  color: #fff;
}

.container {
  max-width: 768px;
  margin: 0 auto;
}

.one {
  background-color: #161c2c;
  pointer-events: none;
  
  &__inner {
    padding: 0 15px;
    padding-top: 15px;
    padding-bottom: 20%;
    
    @media(min-width: 768px) {
      padding-bottom: 153px;
    }
  }
  
  &__content {
    width: 70%;
    pointer-events: all;
    
    @media(min-width: 768px) {
      width: 50%;
    }
  }
}

.two {
  position: relative;
  z-index: 0;
  pointer-events: none;
  
  &__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  &__rect--mobile {
    display: none;
    
    @media(max-width: 768px) {
      display: block;
    }
  }
  
  &__rect--desktop {
    display: none;
    
    @media(min-width: 768px) {
      display: block;
    }
  }
  
  &__inner {
    padding: 15px;
    padding-top: calc(52.08% + 15px);
    margin-top: -52.08%;
    padding-bottom: 15%;
    
    @media(min-width: 768px) {
      padding-top: 415px;
      margin-top: -400px;
    }
  }
  
  &__content {
    width: 70%;
    margin-left: 25%;
    pointer-events: all;
    
    @media(min-width: 768px) {
      width: 50%;
    }
  }
}

.three {
  position: relative;
  z-index: 0;
  pointer-events: none;
  
  &__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  &__rect--mobile {
    display: none;
    
    @media(max-width: 768px) {
      display: block;
    }
  }
  
  &__rect--desktop {
    display: none;
    
    @media(min-width: 768px) {
      display: block;
    }
  }
  
  &__inner {
    padding: 15px;
    padding-top: calc(15.625% + 15px);
    margin-top: -15.625%;
    
    @media(min-width: 768px) {
      padding-top: 135px;
      margin-top: -120px;
    }
  }
  
  &__content {
    width: 70%;
    pointer-events: all;
    
    @media(min-width: 768px) {
      width: 50%;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.