Question

请查看此网站模板http://www.gt3themes.com/website-templates/timber/#。我正在尝试使用木材背景重建他们对标头图像所做的效果。它们在背景图像上创建了一个倾斜的底部，没有任何css变换或任何东西。它们在左侧使用3000px的边框，在底部使用150px的边框。但是，我不确定左边的3000px边框是如何产生效果的。如果我减少左边界，那么倾斜就会消失。谁能解释他们是如何创造这种效果的？感谢。

Answer 1

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

http://www.gt3themes.com/website-templates/timber/images/sliderL.png

.headerLine:after {
content: "";
position: absolute;
z-index: 1;
pointer-events: none;
bottom: 0;
left: 0;
width: 100%;
/* 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 white;
border-left: 3000px solid transparent;
}

Answer 2

将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);
}

你会看到诀窍。它是一个经典的边界三角形。边框底部原本是白色，隐藏在图像的底部。左边框是透明的，需要创建三角效果。

Answer 3

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

这个JSFiddle会让你知道我在说什么：http://jsfiddle.net/dzul1983/d8fvfuLs/

我们可以通过操纵边框宽度来创建三角形，如下所示：http://jsfiddle.net/dzul1983/d8fvfuLs/3/

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

Divs CSS的倾斜背景图像

3 个答案: