带有图像背景的 SVG 三角形分隔符

Question

好吧，我正在尝试创建一个 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)

到元素

并且：

只是在 section1 添加 BG

Answer 1

这是一种使用与您的示例相同的代码但 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>

Answer 2

首先，我很清楚这并没有直接回答问题，但是发问者在评论中表示他们也对非 SVG 解决方案感兴趣，原因稍后在post，这是解决这个问题的更好方法。

section {
  background: url('http://i.imgur.com/k8BtMvj.jpg');
  background-size: cover;
  height: 200px;
  position: relative;
  width: 600px;
}
section:after {
  border-color: transparent #2a80b9;
  border-style: solid;
  border-width: 90px 300px 0; /* the first value is the height of the triangles, the second is half the width of the parent container */
  content: '';
  height: 10px; /* this is the height of the solid color underneath the triangles */
  position: absolute;
  bottom: 0;
}

<section></section>

这个解决方案的工作原理是在每个部分的末尾绝对放置一个元素，覆盖它并通过使用边框呈现所需的形状 - 通过为顶部边框提供透明颜色。

与 SVG 解决方案相比，它具有以下特点：

由于普遍适用的规则，不需要在每个部分都添加额外的标记
这也意味着它更容易维护，因为您不必遍历多个 html 文件，寻找杂散的 SVG（这就是样式应该进入 CSS 而不是标记的原因首先）
更改 SVG 的形状需要更改多个值，而您只需更改一个 CSS 值即可完成任何您想做的事情。 CSS 规则也比 SVG 多线锚点更易于阅读（这可能是主观的）

Answer 3

具有渐变的变体：

.element {
  display: block;
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(-164deg, transparent 75%, #2A80B9 75%, #2A80B9 100%), linear-gradient(164deg, transparent 75%, #2A80B9 75%, #2A80B9 100%), url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: auto, auto, cover;
  overflow: hidden;
}

<div class="element"></div>

Answer 4

有两个三角形的变体

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.element {  
  position: relative;
  width: 100%;
  height: 200px;
  background: url(http://i.imgur.com/k8BtMvj.jpg) no-repeat center top;
  background-size: cover;
}
.element:before,
.element:after{
  content: '';
  position: absolute; bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
}
.element:before{
  left: 0;  
  border-width: 100px 0 0 55vw;
  border-color: transparent transparent transparent #00f;
}
.element:after{
  right: 0;  
  border-width: 0 0 100px 55vw;
  border-color: transparent transparent #00f transparent;
}

<div class="element"></div>

变体剪辑路径

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.element {  
  position: relative;
  width: 100%;
  height: 200px;
  background: url(http://i.imgur.com/k8BtMvj.jpg) no-repeat center top;
  background-size: cover;
}
.element:before{
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%;
  height: 100px;
  background: #00f;
  -webkit-clip-path: polygon(50% 95%, 100% 40%, 100% 100%, 0 100%, 0 40%);
  clip-path: polygon(50% 95%, 100% 40%, 100% 100%, 0 100%, 0 40%);
}

<div class="element"></div>

带有图像背景的 SVG 三角形分隔符

SVG triangle separator with image background

html

css

svg

css-shapes