Eğimli div üst ve alt CSS

Question

Aşağıdaki eğimli div yapmayı deniyorum. Aşağıdaki şekle neredeyse ulaşabildim, ancak alttaki şekil olarak alt kısım doğru yönde eğik değil. Bunu nasıl düzeltebilirim?

Şekli Ekli

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

Basitçe negatif sayıya .slanted:after için skewY değiştirmek ve buna göre height ayarlamak (sadece bir örnek aşağıda numaraları - Onu nasıl uyum):

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

Updated Fiddle

Answer 2

Bir de solgunluk sınırı var, renkte uzun sol bir tane yarat ve üst ve altını şeffaf hale getir.

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

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

Answer 3

İstediğiniz sonuca ulaşmak için CSS3 klip yolu özelliğini kullanabilirsiniz. Aşağıda çalışan bir js keman.

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/