Inclined top and bottom CSS

Question

I am trying to make the next oblique div. I almost reached the shape below, however the bottom is not tilted in the right direction, like my shape is below. How can i fix this?

Attached figure

http://jsfiddle.net//fgdcq3qp/

CSS

.slanted { background: red; box-sizing: border-box; height: 40vh; width: 100%; position: relative; padding: 20px; } .slanted:before { content: ""; background: red; height: 40px; transform: skewY(2deg); position: absolute; left: 0; right: 0; z-index: -1; } .slanted:after { content: ""; background: red; height: 40px; transform: skewY(1deg); position: absolute; left: 0; right: 0; z-index: -1; } .slanted:before{ top: -20px; } .slanted:after { bottom: -30px; } 

HTML

 <div class="slanted"> <h2>Hello World!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis et debitis pariatur perferendis adipisci doloribus aspernatur ea quo illum a.</p> 

Answer 1

Just change skewY to .slanted:after to a negative number and edit the height accordingly (the numbers given below are just an example - set it to the way you want it):

 .slanted:after { content: ""; background: red; height: 80px; transform: skewY(-5deg); position: absolute; left: 0; right: 0; z-index: -1; } 

Updated Fiddle

Answer 2

There is also a cut of borders, create a long left color and make the top and bottom transparent.

 #trap { height: 100px; border-top: 20px solid transparent; border-left: 500px solid aqua; border-bottom: 30px solid transparent; } 

 <div id="trap"></div> 

Answer 3

You can use the CSS3 clip property to achieve the desired result. Below is a working script.

 clip-path: polygon(0% 0%, 100% 20%, 100% 85%, 0 100%); -webkit-clip-path: polygon(0% 0%, 100% 20%, 100% 85%, 0 100%); 

http://jsfiddle.net/niteshp27/fgdcq3qp/5/