The following problem has appeared: it is required to make such a construction (picture attached), but I cannot understand how this can be done. Help me please.

enter image description here

UPD: Perhaps not quite correctly stated the essence of the issue. The figure shows not a gradient, but two different blocks, between which there is a distance

3 answers 3

You can use the linear-gradient :

 div { width: 300px; height: 200px; border: 1px solid red; background: linear-gradient(65deg, blue 35%, white 0, white 50%, grey 0); } 
 <div> </div>

    There is a solution using skewX

     .skew { padding: 20px; margin: 0 5px; width: 100px; color: white; background-color: #F48024; -webkit-transform: skewX(15deg); -moz-transform: skewX(15deg); -ms-transform: skewX(15deg); -o-transform: skewX(15deg); transform: skewX(15deg); } .container { display: flex; } 
     <div class="container"> <div class="skew"></div> <div class="skew"></div> </div> 

       * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin:0; } .headerimage { background-color:#003a6f; height:600px; width:100%; background-size:cover; position:relative; z-index:-1; } #backshape .wrapper { display:block; float:left; margin:50px auto 200px; width:100%; padding:0 5%; transform:skew(0deg,-5deg); -ms-transform:skew(0deg,-10deg); -webkit-transform:skew(0deg,-5deg); } .product { float:left; width:29%; min-height:200px; background:blue; margin:2%; transform:skew(0deg,-5deg); -ms-transform:skew(0deg,-10deg); /* IE 9 */ -webkit-transform:skew(0deg,0deg); /* Safari and Chrome */ } #backshape { z-index:1; display:block; float:left; margin-top:-100px; width:100%; background:white; transform:skew(0deg,10deg); -ms-transform:skew(0deg,10deg); /* IE 9 */ -webkit-transform:skew(0deg,5deg); /* Safari and Chrome */ } .footer { z-index:2; margin-top:-4em; position:relative; width:100%; display:block; float:left; } .footer .wrapper { height:150px; background:green; } 
       <div class="headerimage"> &nbsp; </div> <div id="backshape"> <div class="wrapper"> <div class="product">&nbsp;</div> <div class="product">&nbsp;</div> <div class="product">&nbsp;</div> <div class="product">&nbsp;</div> <div class="product">&nbsp;</div> <div class="product">&nbsp;</div> <div class="product">&nbsp;</div> <div class="product">&nbsp;</div> <div class="product">&nbsp;</div> <div class="product">&nbsp;</div> <div class="product">&nbsp;</div> <div class="product">&nbsp;</div> </div> </div> <div class="footer"> <div class="wrapper"></div> </div>