CODEWITHSUNDEEP
htmlcsssvg
NewCod3r
NewCod3r

Reputation: 1258

add image background to svg area

I have this code for show svg over of my div :

<div class="div-2"></div>
<div class="div-1">
    <div class="decor-top">
        <svg class="decor" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0 L50 100 L100 0z" stroke-width="0"></path>
        </svg>
    </div>
</div>

CSS:

.div-1 {
    background-image: url('http://kidsplanet.ancorathemes.com/wp-content/uploads/2015/07/slider11.jpg');
    height:250px;
    width:100%;
    position:relative;
}
.div-2 {
    background-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
    height:250px;
    width:100%;
    background-color:green;
    position:relative;
}
.decor-top {
    position:absolute;
    height:30px;
    top:0;
    width:100%;
     fill: #fff;
  stroke: #fff;
}

this worked but in div-2 I add green background and repeat texture image So for better design I need to add/(replace with white) green background and repeat texture image for svg area. how do add ?!

DEMO

Upvotes: 1

Views: 136

Answers (1)

Persijn
Persijn

Reputation: 14990

Getting a arrow over another div like this is actually pretty difficult.
Here is a solution using clip-path. But this is only supported by chrome and firefox.
If your still looking for a better answer there are some really good answers on this question Transparent arrow/triangle by web-tiki

.div-1 {
  background-image: url('http://kidsplanet.ancorathemes.com/wp-content/uploads/2015/07/slider11.jpg');
  height: 250px;
  width: 100%;
  margin-top: -25px;
}
.div-2 {
  background-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
  height: 250px;
  width: 100%;
  background-color: green;
  position: relative;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
}
<div class="div-2"></div>
<div class="div-1">
</div>

Upvotes: 1

Related Questions