SVG三角形分隔符，带有图像背景
豪尔赫·安佐拉（Jorge Anzola）
好吧，我正在尝试创建一个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)
到元素
和：
刚向第1节添加BG
网络提基
这是一种使用与示例相同的代码的方法，但是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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
SVG三角形分隔符，带有图像背景
- 2
div底部带有三角形的背景图像
- 3
字符串三角形，以空格作为分隔符C语言
- 4
毕加索（Picasso）加载图像，在图像的一角带有三角形
- 5
绘制带有圆角的三角形
- 6
如何创建带有边框和背景属性的三角形 div？
- 7
带有向上箭头三角形的背景边框视图 | 反应本机
- 8
具有相同背景图像的三角形::: after
- 9
具有相同背景图像的三角形::: after
- 10
如何使用SVG以编程方式绘制带有圆角的三角形？
- 11
带有切出的透明三角形的图像
- 12
遮罩图像，底部带有三角形
- 13
将三角形移动到带有三角形条的新列
- 14
三角形多色背景css
- 15
在背景图像上创建透明的CSS三角形
- 16
为什么三角形在图像上渲染背景色？
- 17
在背景图像上创建一个透明的CSS三角形
- 18
在背景图像中拟合 4 个三角形
- 19
如何添加允许查看图像背景的边框（“三角形”）？
- 20
SVG三角形，宽度为100％
- 21
使用CSS，Canvas或SVG的三角形
- 22
gnuplot中基于三角形的图像
- 23
遮盖图像底部的三角形
- 24
jQuery显示/隐藏带有文本和三角形的对象-三角形移动，但是文本消失
- 25
jQuery显示/隐藏带有文本和三角形的对象-三角形移动了，但是文本消失了
- 26
具有固定背景的透明三角形
- 27
具有半透明边框的背景上的CSS透明三角形
- 28
具有透明背景的全角垂直响应三角形
- 29
具有三角形形状的 HTML5 正文背景 CSS
我来说两句