十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
效果如下图所示:
怎么样!效果是不是很棒!
下面我们来分析一下上面的代码:
首先创建两个div
然后分别给这两个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创建三角背景图像”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!