.area1 {
    background-color: #cc0000;
    padding-top: 50px;
    height: 200px;
    overflow:hidden;
    position:relative;
  }
  .area1::before { 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 90px;
    background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23ffffff"/></svg>'); 
  }

  .area2 {
    background-color: #333333;
    padding-top: 50px;
    height: 200px;
    overflow:hidden;
    position:relative;
  }
  .area2::before { 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 90px;
    background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23cc0000"/></svg>'); 
  }

  @media (min-width:2100px) {
    .area1::before {
      background-size: 100% calc(2vw + 90px);
    }
    .area2::before {
      background-size: 100% calc(2vw + 90px);
    }
  }