CSS trên cùng và dưới cùng của CSS

Question

Tôi đang cố gắng thực hiện div nghiêng sau. Tôi đã gần như đạt được hình dạng dưới đây tuy nhiên phía dưới là không xiên theo hướng đúng như hình dạng của tôi dưới đây. Làm thế nào tôi có thể sửa lỗi này?

Shape đính kèm

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

Đơn giản chỉ cần thay đổi skewY cho .slanted:after đến một số âm và điều chỉnh height phù hợp (số dưới đây chỉ là ví dụ - điều chỉnh theo cách bạn muốn nó):

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

Updated Fiddle

Answer 2

Có sollution biên giới quá, tạo ra một dài trái một màu và làm cho đầu và đáy trong suốt.

#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

Bạn có thể sử dụng CSS3 sở hữu clip-con đường để đạt được kết quả mong muốn. Dưới đây là một js fiddle làm việc.

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/