<div class="block one">
  <div class="item">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat mollitia error accusamus voluptas omnis distinctio itaque numquam cumque atque, quos voluptatibus vitae ipsam officiis deleniti illum non sed ex impedit?
  </div>
</div>

<div class="svg-container" >
  <svg viewBox="0 0 20 3"     
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     vector-effect="non-scaling">
    <rect width="100%" height="99%"  x="0" y="0" fill="darkgreen" />
    <path d="M0,0,20,0,0,3z" fill="#5fc18b" />
    <path d="M0,3,20,3,20,0.20z" fill="#45a36f" />
  </svg>
</div>

<div class="block two">
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum eaque vero vel, quidem, optio rem autem eum consequuntur quasi ut ad, adipisci alias sapiente? Illum dolorem officia veniam est possimus.
  </div>
</div>

html,body{
  margin: 0;
  padding: 0;
}

.one{
  background: #5fc18b;
}

.two{
  background: #45a36f;
}

.block{
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item{
  width: 400px;
}

.svg-container{
  width: 100%;
}

svg{
 display: block;
  margin-bottom: -1px;
}