Image with bottom triangle that overlay another image
In the answer you linked to there are 2 approaches that allow the output you are looking for.
If you look under the 4th approach (Tooltip with a triangle over an image.) the technique shown is the same as what facebook uses for tooltips when you hover a name.
Although this approach has a better browser support, I would prefer to use an svg approach (also provided in the post you linked to) with the clipPath
element to make the triangle at the bottom.
Adapted to your use case, it could look like this :
*{margin:0;}
svg{
display:block;
position:relative;
margin-bottom:-3.5%;
z-index:50;
}
svg:nth-child(2){
z-index:49;
}
svg:nth-child(3){
z-index:48;
}
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 400">
<defs>
<clipPath id="clip">
<path d="M0 0 H600 V380 H320 L300 400 L280 380 H0z" />
</clipPath>
</defs>
<image xlink:href="http://lorempixel.com/600/400/people/1" width="600" height="400" clip-path="url(#clip)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 400">
<image xlink:href="http://lorempixel.com/600/400/nature/1" width="600" height="400" clip-path="url(#clip)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 400">
<image xlink:href="http://lorempixel.com/600/400/abstract/6" width="600" height="400" clip-path="url(#clip)"/>
</svg>
Note that for simplicity the demo uses images with the same aspect ratio. Each image is in its own svg tag for maintainability (example: add or remove an image)
Output :
More info on MDN :
- clipPath
- svg
hi i haven't show you code deeply but as per your desired out put image
i have created following in my way and here it is the code of that
Please Note : This will not work with the Internet Explorer and FireFox
In FireFox clip-path support by the only url value
for browser support please look at following reference link
Browser Support for clip-path
.boundry{
margin-top:100px;
margin-left:100px;
width:50%;
margin-bottom:100px;
}
.arrow_box {
height:180px;
position: relative;
background: #88b7d5;
padding:15px;
text-align:center;
color:white;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 46% 80%, 51% 90%, 56% 80%, 0% 80%);
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 46% 80%, 51% 90%, 56% 80%, 0% 80%);
}
.arrow_box:nth-child(1){
background:url('http://3.bp.blogspot.com/-lz3nDbV440A/VO4QpcN4ZCI/AAAAAAAAN94/PAYUtUysb-4/s1600/happy-holi-images-2015%2B(9).jpg');
color:grey;
z-index: 5;
}
.arrow_box:nth-child(2){
margin-top: -42px;
margin-bottom: -35px;
background:url('http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg');
}
<div class="boundry" >
<div class="arrow_box">
<h1 class="logo">first image</h1>
</div>
<div class="arrow_box">
<h1 class="logo">second image</h1>
</div>
</div>
and here is the working demo code for this
Demo Code