倾斜 div 顶部和底部 CSS

Question

我正在尝试使以下倾斜div。我几乎已经达到了下面的形状，但是底部并没有像我下面的形状那样向正确的方向倾斜。我该如何纠正？

附加形状

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 {
    height: 100px;
    border-top: 20px solid transparent;
    border-left: 500px solid aqua;
    border-bottom: 30px solid transparent;
}

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

Answer 3

您可以使用CSS3clip-path属性来达到预期的效果。下面是一个工作 js fiddle.

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/

倾斜 div 顶部和底部 CSS

slanted div top and bottom CSS

html

css

css-shapes