nachylona część górna i dolna CSS

Question

Próbuję zrobić następujący ukośny div. Prawie osiągnąłem kształt poniżej, jednak dno nie jest pochylone we właściwym kierunku, ponieważ mój kształt jest poniżej. Jak mogę to poprawić?

Kształt dołączony

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

Wystarczy zmienić skewY dla .slanted:after do liczby ujemnej i dostosować height odpowiednio (numery poniżej to tylko przykład - dostosować do jak chcesz):

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

Updated Fiddle

Answer 2

Istnieje również rozwiązanie dotyczące granic, tworzenie długiego lewego koloru i sprawienie, że góra i dno będą przezroczyste.

#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

Można użyć właściwości clip-path CSS3 do osiągnięcia pożądanego rezultatu. Poniżej znajduje się działające skrzypce 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/