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）

- Jorge Anzola

---

你可以只使用CSS来自动地为每个部分完成此操作，而无需额外的标记...您特别想使用SVG的原因是什么？ - TheThirdMan

嗯，我想使用SVG来学习更多，但我没有理由。你会如何用CSS实现它？ - Jorge Anzola

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>

- web-tiki

---

是的！非常好用。谢谢！https://jsfiddle.net/JorgeAnzola/v49ghtzf/1/ - Jorge Anzola

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>

- Yuri

---

@МаксимЛенский，来我的聊天室吧。让我们聊聊.. http://chat.stackexchange.com/rooms/52027/communication-with-the-yuri - Yuri

Answer 3

首先，我很清楚这并没有直接回答问题，但是问问题的人在评论中表示他们对非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多行锚点更易读（这可能是主观的）

- TheThirdMan

---

这种解决方案的缺点是：您需要知道容器的确切大小。三角形/边框始终具有由边框宽度定义的像素大小。 - Philipp

@Philipp，你说得没错，但是在某些情况下，您可以通过使用基于百分比的值或vw/vh来帮助解决问题。如果您需要将元素跨越整个视口宽度，并且想要保持其纵横比（就像问题中的示例一样），后者特别适用于使用vh作为底边框。 - TheThirdMan

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>

- Dmitriy