正如标题所言我们今天主要带大家 了解 使用CSS3创建炫酷的三角背景的方法，这在我们想展示某些完全不同的选择（例如白天和黑夜或冬天和夏天）时非常有用。
下面我们就先直接上代码：
<!DOCTY PE ht ML >
<html>
<head>
< ;m eta charset="utf-8">
<style>
body {
m arg in: 0;
padding: 0;
}
div {
pos IT ion: absolute;
h ei ght: 100vh;
width: 100vw;
}
.day {
background -i mage: url("https:// img .js-code .COM /upload/article/000/000/024/611f69e8a300f343. jpg ");
background-size : cover;
background-repeat: no-repeat;
}
.night {
background-image: url("https://img.js-code.com/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>
</script>
</body>
</html>效果如下图所示：
怎么样！效果是不是很棒！
下面我们来分析一下上面的代码：
首先创建两个div
<body> <div class="day"></div> <div class="night"></div> </body>
然后分别给这两个div使用@H_ 360 _31@background-image 属性添加背景图片，并使用 background -s ize 属性设置图片大小、 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()函数：用于定义一个多边形，也可以用来剪裁图形。它的参数是一组坐标对（< Shape -arg> <shape-arg>），每一个坐标对代表多边形的一个顶点坐标。浏览器会将最后一个顶点和第一个顶点连接得到一个封闭的多边形。坐标对使用逗号来进行分隔，可以使用绝对单位或百分比单位值。
PHP中文网平台有非常多的视频教学资 源 ，欢迎大家学习《css视频教程》！
以上就是利用CSS3创建炫酷的三角背景图像的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 利用CSS3创建炫酷的三角背景图像 全部内容，希望文章能够帮你解决 利用CSS3创建炫酷的三角背景图像 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于利用CSS3创建炫酷的三角背景图像的详细内容...