SVG三角形分隔符，带有图像背景 [英] SVG triangle separator with image background

问题描述

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

Well, I'm trying to create an SVG section separator. It worked like this:

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

So far, so good. But now, I want to add a background to section1, including the SVG "pick", in example:

All I've accomplished is (really bad results):

Adding a

background: url(img)

to the element

And:

Justing adding a BG to section1

解决方案

Here is an approach using the same code as your example but the svg path is changed to an inverted triangle and absolutely positioned to the bottom of the section:

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

这篇关于SVG三角形分隔符，带有图像背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！