扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇内容介绍了“如何利用CSS3创建三角背景图像”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
目前创新互联公司已为上千家的企业提供了网站建设、域名、网页空间、网站运营、企业网站设计、颍州网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
直接上代码:
效果如下图所示:
怎么样!效果是不是很棒!
下面我们来分析一下上面的代码:
首先创建两个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创建三角背景图像”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流