CODEWITHSUNDEEP
htmlcsssvgcss-shapes
Jorge Anzola
Jorge Anzola

Reputation: 1235

SVG triangle separator with image background

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>

enter image description here

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

enter image description here

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

Adding a

background: url(img)

to the element

enter image description here

And:

Justing adding a BG to section1

enter image description here

Upvotes: 10

Views: 8719

Answers (4)

Dmitriy
Dmitriy

Reputation: 4503

Variant with two triangles

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

Variant clip-path

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

Upvotes: 0

Yuri
Yuri

Reputation: 784

Variant with a gradient:

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

Upvotes: 4

TheThirdMan
TheThirdMan

Reputation: 1522

First of all, I'm well aware this doesn't answer the question directly, however the questioner stated in the comments that they're interested in a non-SVG solution as well, and for reasons explained later in the post, it's a much better way to tackle this problem.

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>

This solution works by absolutely placing an element at the end of every section, overlaying that and rendering the required shapes by use of borders - by giving the top border a transparent color.

This has the following qualities compared to an SVG solution:

  • there's no need for extra markup in every section because of the universally applying rule
  • that also means it's easier to maintain, because you don't have to go through multiple html files, looking for stray SVGs (which is why style should go in CSS and not markup in the first place)
  • changing the shape of the SVG requires changing several values, while you only need to change a single CSS value for anything you want to do. The CSS rules are also much more human-readable than the SVG multi-line anchor points (this might be subjective)

Upvotes: 2

web-tiki
web-tiki

Reputation: 103780

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>

Upvotes: 10

Related Questions