倾斜的div顶部和底部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

也有一个边框溶解，创建一个颜色很长的左边，使顶部和底部透明。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将skewY的{​​{1}}更改为负数，然后相应地调整.slanted:after（下面的数字只是一个示例 - 根据您的需要进行调整）：

height

Updated Fiddle

Answer 3

您可以使用CSS3 clip-path属性来实现所需的结果。下面是一个工作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/