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://img.php.cn/upload/article/000/000/024/611f69e8a300f343.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("https://img.php.cn/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>

实际效果如图所示：

CSS3建立酷炫三角背景图像的小窍门

如何！作用是否非常好！

下面我们就来分析一下上边的代码：

最先建立2个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()函数公式：用以界定一个不规则图形，还可以用来裁切图型。它主要参数是一组座标对（<shape-arg> <shape-arg>），每一个座标对意味着多边形一个顶点坐标。电脑浏览器会把最后一个端点和第一个端点联接得到一个密闭的不规则图形。座标对分号去进行隔开，可以用肯定企业或百分数企业值。

AdminJS服务平台有很多的在线视频教学网络资源，欢迎各位学习培训《css视频教程》！

之上就是通过CSS3建立酷炫三角背景图像的具体内容，大量欢迎关注AdminJS其他类似文章！

标签：

原文地址：CSS3建立酷炫三角背景图像的小窍门发布于2023-05-28 18:45:02