Css 倾斜/仅倾斜div的底部

我一直试图在

div

的底部添加一个歪斜/倾斜。我已经取得了一些成功，正如您在下面的示例中所看到的，我已经成功地将倾斜应用于页面上的几个元素

目前，倾斜应用于容器的顶部和底部，它似乎在底部和顶部的一半停止，然后返回到直边

我希望实现的是上边缘笔直，下边缘倾斜，例如：

*{
填充：0；
保证金：0；
}
#主幻灯片{
位置：相对位置；
z指数：1；
明确：两者皆有；
}
#主幻灯片{
溢出：隐藏；
}
#主幻灯片{
-webkit变换：歪斜（-2deg）；
-moz变换：歪斜（-2deg）；
-ms变换：偏斜（-2deg）；
-o变换：偏斜（-2deg）；
变换：歪斜（-2deg）；
溢出：隐藏；
}
.自定义btn颜色>*，
.stripe.自定义btn颜色>*{
颜色：继承！重要；
}
#页面{
位置：相对位置；
溢出：隐藏；
}
#页面{
背景：#ffffff无重复中心顶部；
背景尺寸：自动；
背景附件：；
}
身体{
背景：#ffffff无无重复固定中心；
背景尺寸：封面；
}
html{
字体大小：100%；
-webkit文本大小调整：100%；
-ms文本大小调整：100%；
}
html，
身体，
body.page，
.wf容器>*{
字体：普通300 18px/24px“Lato”，Helvetica，Arial，Verdana，无衬线；
字距：正常；
颜色：#676b6d；
}
.rev_滑块_包装器{
位置：相对位置；
z指数：0；
}
.rev_滑块_包装器{
宽度：100%；
}
.fullwidthbanner容器{
位置：相对位置；
填充：0；
溢出：隐藏；
}
.rev_滑块_包装器{
z指数：1；
}
.rev_滑块{
位置：相对位置；
溢出：可见；
}
.fullwidthbanner容器。fullwidthbanner容器{
宽度：100%；
位置：相对位置；
}
dd，
dl，
菜单，
ol,，
保险商实验室{
列表样式：无；
列表样式图像：无；
}
.tp Revesli，
.tp revslider mainul{
填充：0！重要；
边距：0！重要；
列表样式：无！重要；
}
.rev_滑块>ul，
.rev_slider_wrapper>ul，
.tp revslider mainul>li，
.rev_slider>ul>li，
.rev_slider>ul>li:：之前，
.tp revslider mainul>li:：之前，
.tp simpleresponsive>ul，
.tp SimpleResponse>ul>li，
.tp SimpleResponse>ul>li:：之前，
.tp revslider mainul>li，
.tp SimpleResponse>ul>li{
列表样式：无！重要；
位置：绝对位置；
保证金：0px！重要；
填充：0px！重要；
溢出x：可见；
溢出y：可见；
列表样式类型：无！重要；
背景图像：无；
背景位置：0px 0px；
文本缩进：0em；
顶部：0px；
左：0px；
}
.tp revslider mainul>li，
.rev_slider>ul>li，
.rev_slider>ul>li:：之前，
.tp revslider mainul>li:：之前，
.tp SimpleResponse>ul>li，
.tp SimpleResponse>ul>li:：之前，
.tp revslider mainul>li，
.tp SimpleResponse>ul>li{
可见性：隐藏；
}
.tp横幅{
可见性：隐藏；
宽度：100%；
高度：5px；
背景：#fff；
背景：rgba（0,0,0,0.15）；
位置：绝对位置；
z指数：200；
顶部：0px；
}
.tp横幅{
背景：#000；
背景：rgba（0,0,0,0.15）；
高度：5px；
}
.tp-bottom.tp-bannertimer{
顶部：自动；
底部：0px！重要；
高度：5px；
}
.tp加载器{
最高：50%；
左：50%；
z指数：10000；
位置：绝对位置；
}
.喷丝头0.tp-loader{
宽度：40px；
高度：40px；
背景色：#fff；
背景：url（../assets/loader.gif）无重复中心；
盒子阴影：0px 0px 20px 0px rgba（0,0,0,0.15）；
-webkit盒阴影：0px 0px 20px 0px rgba（0,0,0,0.15）；
利润上限：-20px；
左边距：-20px；
-webkit动画：tp rotateplane 1.2s无限轻松输入输出；
动画：tp rotateplane 1.2s无限轻松进出；
边界半径：3px；
-moz边界半径：3px；
-webkit边界半径：3px；
}
.rev_滑块li.tp-revslider-slidesli{
位置：绝对！重要；
}
.tp bgimg{
-webkit变换：歪斜（2deg）；
-moz变换：偏斜（2deg）；
-ms变换：偏斜（2deg）；
-o变换：偏斜（2deg）；
变换：偏斜（2deg）；
}

您可以使用伪元素和CSS三角形实现此效果 与使用偏移整个长方体的透视图的

skew

不同，您可以使用伪元素将三角形覆盖在图像顶部，以产生倾斜长方体的效果

这种技术的一般原理是：

• 使用

  ：after

  伪元素允许在不需要额外标记的情况下将内容添加到页面
• 使用CSS三角形将这个伪元素变成一个倾斜的三角形（与页面背景颜色相同），它跨越了框的宽度。这给人的印象是盒子本身是倾斜的