Question

好吧，我正在尝试创建一个SVG部分分隔符。它的工作原理如下：

＆＃13;

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

＆＃13;

到目前为止，这么好。但现在，我想在section1中添加一个背景，包括SVG＆＃34; pick＆＃34;，例如：

我所做的一切都是（结果非常糟糕）：

添加

background: url(img)

到元素

并且：

只是将BG添加到section1

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

首先，我很清楚这并没有直接回答这个问题，但是提问者在评论中表示他们也对非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>

SVG三角分离器有图象背景

4 个答案: