Html DIVSCSS的倾斜背景图像

请查看此网站模板。我试图用木头背景重现它们在报头图像上的效果。它们在背景图像上创建一个倾斜的底部，没有任何css变换或任何东西。他们在左侧使用3000px的边框，在底部使用150px的边框。然而，我不确定左边的3000px边框是如何产生这种效果的。如果我缩小左边框，倾斜就会消失。有人能解释一下他们是如何产生这种效果的吗？谢谢。

他们正在使用添加了css的png来放置在图像顶部：

将css更改为

.line2:after {
content: "";
position: absolute;
z-index: 1;
pointer-events: none;
bottom: 0;
left: 0;
width: 100%;
/* height: 240px; */
/* background: url(../images/sliderL.png) center center no-repeat; */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-bottom: 150px solid rgb(56, 156, 38);
border-left: 3000px solid rgba(146, 31, 31, 0.89);
}

---

你会看到诀窍的。这是一个典型的三角形边界。边框底部最初是白色的，并且隐藏了图像的底部。左边的边框是透明的，需要创建三角形效果。

应用于

：after

元素的边框在这里是关键的。基本上，一个元素有4个边界点——顶部、底部、左侧和右侧。如果你想象一个元素的边界，就像你想象一个画框的边界一样，你会发现每个边界的连接点都在元素的边缘。没什么特别的。但是，当您增加边框的大小时，您会注意到，如果边框在所有边上都具有相同的宽度，则连接点成一定角度，并从元素的内边缘到外边缘形成一条直线

这个JSFiddle将让您了解我所说的内容：

我们只需操纵边界宽度即可创建三角形，如下所示：

因此，通过操纵左边框和下边框，我们可以复制在木材页面上看到的效果。现在，您应该了解它是如何工作的，并且了解为了达到您的目的，您需要做些什么来复制这种效果

.line2:after {
content: "";
position: absolute;
z-index: 1;
pointer-events: none;
bottom: 0;
left: 0;
width: 100%;
/* height: 240px; */
/* background: url(../images/sliderL.png) center center no-repeat; */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-bottom: 150px solid rgb(56, 156, 38);
border-left: 3000px solid rgba(146, 31, 31, 0.89);
}