好吧,我正在尝试创建一个SVG部分分隔符.它的工作方式如下:
<section id="section1"> </section> <svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none"> <path d="M0 0 L50 100 L100 0 Z" /> </svg> <section id="section2"> </section>
到现在为止还挺好.但是现在,我想在section1中添加一个背景,包括SVG“pick”,例如:
我所完成的只是(结果非常糟糕):
background: url(img)
对元素
和:
只是将BG添加到section1
解决方法
下面是使用与示例相同的代码的方法,但svg路径更改为倒三角形并且绝对定位到该部分的底部:
#section1{ position:relative; background:url('http://i.imgur.com/k8BtMvj.jpg'); background-size:cover; height:200px; } svg{ position:absolute; bottom:-10px; left:0; width:100%; height:100px; display:block; }
<section id="section1"> <svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none"> <path d="M0 0 L50 90 L100 0 V100 H0" fill="#2A80B9" /> </svg> </section>
原文地址:https://www.jb51.cc/html/226408.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。