带有图像背景的 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

带有渐变的变体：

.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 3

首先，我很清楚这并不能直接回答问题，但是提问者在 cmets 中表示他们也对非 SVG 解决方案感兴趣，原因将在后面的帖子中解释，这是解决此问题的更好方法。

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 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>