CODEWITHSUNDEEP
htmlcss
Faisal Athar
Faisal Athar

Reputation: 91

how to create arrow between two background images in css

The desired output is

desired output

after a lot of searching i am able to get it like below.

current output

the below section has less z-index so it is stacked below above section.This cause problem and now when i try to increase its z-index i get following output

enter image description here

so my question is weather it's possible to lower z-index value for only the arrow part so that i can see the above section's background.?

here is my code

css

body{
    margin:0;
}
.box1{
    background:url(images/c_03.png) no-repeat;
    background-size: 100% 100%;
    position:relative;
    height:200px;
    z-index:1;
    overflow:hidden;
}
.box1:before,.box1:after{
    content:" ";
    background: transparent;
    position: absolute;
    width: 22px;
    height: 22px;
    left: 0;
    right:0;
    margin:auto;
    bottom:5px;
    transform:rotate(45deg);   
    -webkit-transform:rotate(45deg);
    z-index:999;
}
.box1:after{
    border: 6px solid #000;
    border-left: transparent;
    border-top: transparent;
    z-index:1;
}
.triangle{
    position:absolute;
    width:100%;
    height:23px;
    background:transparent;
    bottom:0;

}
.triangle:before{
    content:" ";
    border-top:6px solid #000;
    left:-16px;
    width:50%;
    position:absolute;
}
.triangle:after{
    content:" ";
    border-top:6px solid #000;
    right:-16px;
    width:50%;
    position:absolute;
}
.triangle1{
    position:absolute;
    width:100%;
    height:23px;
    background:transparent;
    top:0;

}
.triangle1:before{
    content:" ";
    border-top:6px solid #000;
    left:-16px;
    width:50%;
    position:absolute;
}
.triangle1:after{
    content:" ";
    border-top:6px solid #000;
    right:-16px;
    width:50%;
    position:absolute;
}
.box2{
    background:url(images/2_03.png) no-repeat;
    background-size:100% 100%;
    height:200px;
    z-index:100;
    margin-top:-17px;
    position:relative;
}

and html 

<div class="box1">
  <div class="triangle"></div>
</div>
<div class="box2">
</div>

Upvotes: 2

Views: 524

Answers (1)

Kijan Maharjan
Kijan Maharjan

Reputation: 1031

Is this what you wanted? 

body{
    margin:0;
}
.box1{
    background:url('http://lorempixel.com/1000/400') no-repeat;
    background-size: 100% 100%;
    position:relative;
    height:200px;
    z-index:2;
    overflow:visible;
}
.box1:before,.box1:after{
    content:" ";
    background: transparent;
    position: absolute;
    width: 15px;
    height: 15px;
    left: 0;
    right:0;
    margin:auto;
    bottom:-9px;
    transform:rotate(45deg);   
    -webkit-transform:rotate(45deg);
    z-index:999;
}
.box1:after{
    border: 6px solid #fff;
    border-left: transparent;
    border-top: transparent;
    z-index:1;
}
.triangle{
    position:absolute;
    width:100%;
    height:23px;
    bottom:-17px;
}
.triangle:before{
    content:" ";
    border-top:6px solid #fff;
    left:-11px;
    width:50%;
    position:absolute;
}
.triangle:after{
    content:" ";
    border-top:6px solid #fff;
    right:-11px;
    width:50%;
    position:absolute;
}
.box2{
 background:url('http://lorempixel.com/1002/400') no-repeat;
    background-size:100% 100%;
    height:200px;
    z-index:1;
    margin-top:-17px;
    position:relative;
  box-shadow: inset 0px 50px 100px 20px rgba(0,0,0,0.9);
}
<div class="box1">
  <div class="triangle"></div>
</div>
<div class="box2">
</div>

Upvotes: 2

Related Questions