title: How to do a rounded trapeze inside another trapeze with css
body: <p>I need help with this problem</p>
  
  <p>I want to do with css a figure like this:</p>
  
  <p><img src="https://i.imgur.com/dj5Vg1l.jpg" alt="trapeze with protuberance"></p>
  
  <p>I want to do a trapeze with a "rounded" protuberance in the middle.</p>
  
  <p>I tried to put a trapeze back with z-index 0 an the other rounded with z-index 1, but i couldn't. Another solution for me was using svg but neither, it complicated me more.</p>
  
  <p>Thanks for your help.</p>
  
  <p>I tried to do this:</p>
  
  <pre><code>&lt;style&gt;
  .left {
  height: 66px;
  background: blue;
  float: left;
  position: relative;
  border-top-right-radius: 19px;
  width: 370px;
  }
  
  .left:after {
  content: '';
  position: absolute;
  right: -23.5px;
  bottom: 0px;
  border-top: rgba(255,255,255,0.1) 56px solid;
  border-left: 26px solid #0000ff;
  width: 0;
  z-index: 1;
  }
  
  #trapezoid {
  
  border-bottom: 100px solid #0000ff;
  border-right: 50px solid transparent;
  height: 0;
  width: 330px;
  
   }
  </code></pre>
  
  <p></p>
  
  
  
  <p> `</p>