There is a figure in the design enter image description here

I wanted to draw it with the help of the sci. That's what happened https://jsfiddle.net/4so5mf1t/

<div class="figure"> </div> .figure{ width:500px; height:50px; background: linear-gradient(-185deg, #75a4c0 50%, #d6e4ec 51%); }

But how can you modernize what would be the white line between the bgs?

    1 answer 1

    I got this option. I hope it will be useful.

    Kodpero

     .figure-container { height: 50px; width: 500px; background: #d6e4ec; box-shadow: 0 1px 3px rgba(0,0,0,0.3); margin: 0 auto; position: relative; overflow: hidden; } .top-peace { background: #75a4c0; height: 50px; width: 520px; transform: rotate(-5.5deg); position: absolute; top: -26px; left: -14px; border-bottom: 3px solid #f9f9f9; } 
     <div class="figure-container"> <div class="top-peace"></div> </div>