斜め上と下のCSS

Question

私は次の斜めのdivを作成しようとしています。私は下の形をほぼ達成しましたが、下の形は下の形が正しい方向に傾いていません。どうすれば修正できますか？

形状添付

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

単に負の数に.slanted:afterためskewYを変更し、それに応じてheightを調整（ちょうど例の下の数字を - あなたはそれをしたいどのように調整する）：

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

Updated Fiddle

Answer 2

境界の解決もあります。長い左の色を作成し、上と下を透明にします。

#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

あなたは望ましい結果を達成するためにCSS3クリップパスのプロパティを使用することができます。以下は、動作中のjsバイブルです。

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/