Div倾斜的底部

Question

我正在尝试为我的网站创建一个容器,并在底部略微倾斜,如下所示:

有谁知道如何做到这一点？我尝试过,transform: skewy(-10deg);但它也是顶级的,我试图不去做.

HTML

<div class="slanted">HI</div>

CSS

.slanted {
    background-color:red;
    height:500px;
}

Answer 1

HTML

<div class="slanted">HI</div>

CSS

.slanted {
    background-color:red;
    height:500px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 56%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}

CodePen

http://codepen.io/anthonyastige/pen/PzWvqo

参考

带有CSS蒙版和变换的角度边缘