You need such an adaptive block, in the 9-11 width: 100% for svg does not work.
Tell me how to make this adaptive? thank! enter image description here

  • Maybe before & after & skew? create two pseudo elements rotate them? set the width in%, you must try! - junior-web-dev
  • What about before & after? - Yuri
  • Tupanul, I thought two blocks above and below to fasten curves, but as the example below shows, one block can be transformed in this way. - junior-web-dev
  • If two, then you can use rotate :) - Yuri

2 answers 2

Can be done using transform :

 div { margin: 50px 0; height: 100px; width: 100%; background: green; display:block; -moz-transform: rotate(-5deg) skewX(-5deg) skewY(0deg); -webkit-transform: rotate(-5deg) skewX(-5deg) skewY(0deg); -o-transform: rotate(-5deg) skewX(-5deg) skewY(0deg); -ms-transform: rotate(-5deg) skewX(-5deg) skewY(0deg); transform: rotate(-5deg) skewX(-5deg) skewY(0deg); } 
 <div></div>

Indents from the top and bottom can be finished off with media queries depending on what you have there.

    More as an option

     *{ padding: 0; margin: 0; } div { margin: 50px 0; height: 100px; background: green; position: relative; } div:before, div:after{ content: ''; position: absolute; left: 0; width: 0; height: 0; border-style: solid; } div:before{ bottom: 100%; border-width: 0 0 50px 100vw; border-color: transparent transparent green transparent; } div:after{ top: 100%; border-width: 50px 100vw 0 0; border-color: green transparent transparent transparent; } 
     <div></div>

    • interesting example - junior-web-dev