css如何创建三角背景图像

这篇文章给大家分享的是有关css如何创建三角背景图像的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

如何创建三角背景图像

当我们想展示某些完全不同的选择（例如白天和黑夜或冬天和夏天）时。

这是通过为整个视口创建两个div来完成的，然后需要向它们两个都添加背景图像，然后，第二个div需要一个clip-path属性才能创建三角形。

  
  
body {  margin: 0;  padding: 0;}div {  position: absolute;  height: 100vh;  width: 100vw;}.day {  background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");  background-size: cover;  background-repeat: no-repeat;}.night {  background-image: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");  background-size: cover;  background-repeat: no-repeat;  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);}

clip-path属性创建一个裁剪区域，该区域设置应显示元素的哪一部分。区域内的部分显示，区域外的隐藏。

感谢各位的阅读！关于"css如何创建三角背景图像"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！