利用CSS3创建炫酷的三角背景图像
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
利⽤CSS3创建炫酷的三⾓背景图像
如何让你的⽹页更吸引眼球，更有⾼级感？⼀个好看的背景是不可缺少的！下⾯本篇⽂章就来分享⼀种利⽤CSS3创建炫酷的三⾓背景图像的⼩技巧，让你的⽹页兼美丽与实⽤于⼀体~
正如标题所⾔我们今天主要带⼤家了解使⽤CSS3创建炫酷的三⾓背景的⽅法，这在我们想展⽰某些完全不同的选择（例如⽩天和⿊夜或冬天和夏天）时⾮常有⽤。
下⾯我们就先直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
}
div {
position: absolute;
height: 100vh;
width: 100vw;
}
.day {
background-image: url("https:///upload/article/000/000/024/611f69e8a300f343.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.night {
background-image: url("https:///upload/article/000/000/024/611f6a067f909111.jpg");
background-size: cover;
background-repeat: no-repeat;
clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}
</style>
</head>
<body>
<div class="day"></div>
<div class="night"></div>
</body>
</html>
效果如下图所⽰：
怎么样！效果是不是很棒！
下⾯我们来分析⼀下上⾯的代码：
⾸先创建两个div
<body>
<div class="day"></div>
<div class="night"></div>
</body>
然后分别给这两个div使⽤background-image属性添加背景图⽚，并使⽤background-size属性设置图⽚⼤⼩、background-repeat属性设置不重复平铺。
background-size指定背景图⽚⼤⼩，当值设置为“cover”时，将保持图像的纵横⽐并将图像缩放成将完全覆盖背景定位区域的最⼩⼤⼩。
最后给第⼆个div使⽤clip-path属性画出三⾓形。
clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
clip-path是css3的⼀个新属性，意味裁剪路径的意思，让我们可以很便捷的⽣成各种⼏何图形。
clip-path 通过定义特殊的路径，实现我们想要的图形。
⽽这个路径，正是 SVG 中的 path 。
polygon()函数：⽤于定义⼀个多边形，也可以⽤来剪裁图形。
它的参数是⼀组坐标对（），每⼀个坐标对代表多边形的⼀个顶点坐标。
浏览器会将最后⼀个顶点和第⼀个顶点连接得到⼀个封闭的多边形。
坐标对使⽤逗号来进⾏分隔，可以使⽤绝对单位或百分⽐单位值。
上就是利⽤CSS3创建炫酷的三⾓背景图像的详细内容。
（）。