HTML Section With Curve By CSS3

here we make the HTML  Bottom part of each  Section curve by  CSS transform: skewY property.

HTML

<section class="part1">
  
  <h1>section 1</h1>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, laudantium suscipit velit facilis beatae quibusdam illo illum et quia doloremque quas modi voluptates esse voluptas voluptatem fugiat tenetur consequatur rem.</p>
</section>
<section class="part2">
  
  <h1>section 1</h1>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, laudantium suscipit velit facilis beatae quibusdam illo illum et quia doloremque quas modi voluptates esse voluptas voluptatem fugiat tenetur consequatur rem.</p>
</section>

SCSS

body {
    font-family: sans-serif;
    font-size: 20px; padding:0px;
  margin:0px 
}


section {
    width: 100%;
    height: 70vh;
    text-align: center;
    padding: 100px 100px; text-transform: capitalize;  
    box-sizing: border-box;  
  position:relative;
  
 
  p{ line-height:40px;}
  
  
    
  &.part1 {
    background-color: #009688;
    color: #fff;
    
     &:before {
    right: 0;
    -webkit-transform: skewY(-3deg);
    transform: skewY(-3deg);
    content: '';
    background-color: #009688;
    width: 50%;
    height: 60px;
    position: absolute;
    bottom: -30px;
    z-index: 9;
}
    
  &:after {
    left: 0;
    -webkit-transform: skewY(3deg);
    transform: skewY(3deg);
    content: '';
    background-color: #009688;
    width: 50%;
    height: 60px;
    position: absolute;
    bottom: -30px;
    z-index: 9;
}   
    
    
    
}
  
    &.part2 {
    background-color: #ff5722;
    color: #fff;
      
      
        &:before {
    right: 0;
    -webkit-transform: skewY(-3deg);
    transform: skewY(-3deg);
    content: '';
    background-color: #ff5722;
    width: 50%;
    height: 60px;
    position: absolute;
    bottom: -30px;
    z-index: 9;
}
    
  &:after {
    left: 0;
    -webkit-transform: skewY(3deg);
    transform: skewY(3deg);
    content: '';
    background-color: #ff5722;
    width: 50%;
    height: 60px;
    position: absolute;
    bottom: -30px;
    z-index: 9;
}     
      
      
}
  
  
  
}

Live Example