利用CSS3创建炫酷的三角背景图像 css3怎么把红色的背景图变成一体

如何让你的网页更吸引眼球，更有高级感？一个好看的背景是不可缺少的！下面本篇文章就来分享一种利用CSS3创建炫酷的三角背景图像的小技巧，让你的网页兼美丽与实用于一体~

正如标题所言我们今天主要带大家了解使用CSS3创建炫酷的三角背景的方法，这在我们想展示某些完全不同的选择（例如白天和黑夜或冬天和夏天）时非常有用。

下面我们就先直接上代码：

body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url("/zb_users/upload/2022/10/20221012165656-6346f1d8d1941.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("/zb_users/upload/2022/10/20221012165656-6346f1d8ed1bb.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}