16

It is simple to create arrow at the bottom of image.

But is this possible to achive something like this where second image is not background but another image that goes after first image: Image with triangle at the bottom over image

I created "pen" on codepen.io

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  height: 200px;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.arrow:before,
.arrow:after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 50%;
  box-sizing: border-box;
}
.arrow:before {
  right: 50%;
  border-bottom: 20px solid #000;
  border-right: 20px solid transparent;
}
.arrow:after {
  left: 50%;
  border-bottom: 20px solid #000;
  border-left: 20px solid transparent;
}
<div class="wrap">
  <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
  <div class="arrow"></div>
</div>
<div class="wrap">
  <img src="http://i.imgur.com/EinPKO3.jpg" />
  <div class="arrow"></div>
</div>
Community
  • 1
  • 1
Nicolai
  • 1,907
  • 1
  • 23
  • 31
  • Duplicate of [this](http://stackoverflow.com/questions/23758922/transparent-arrow-triangle?lq=1), However if you want to overlap .. you can use negative margins. – Imran Bughio Oct 05 '15 at 07:50
  • Try using Stack Snippets instead of sites such as codepen.io. – AStopher Oct 05 '15 at 07:51
  • @ImranBughio, example from link you posted asnwers on question with parent>child relation but I ask about siblings elements – Nicolai Oct 05 '15 at 07:53
  • Good question! I add to my favourites with the star to make me update about this topic. Good luck because it's a real interesting problem – Marcos Pérez Gude Oct 07 '15 at 10:22

3 Answers3

10

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.

Tooltip with triangle over non plain content

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 :

Image with bottom triangle over another image

More info on MDN :

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • 1
    great job dude working in FireFox and Internet Explorer as well – Himesh Aadeshara Oct 08 '15 at 09:38
  • @web-tiki, looks good, but I have one more question: how can I put content over images (the idea is that image will be a background for content): each image has its own content... Sure, with JS I can get size of content I need to place and size of svg and then with absolute positioning place content over images...but is there best solution? – Nicolai Oct 08 '15 at 10:22
  • looks better, but anyway when I resize the page image resizes too – Nicolai Oct 08 '15 at 11:03
6

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

Himesh Aadeshara
  • 2,114
  • 16
  • 26
-1

If you want to stack images you have many different methods to use. You can always use the z-index to put them in different orders. You can use .png files to add contrast to the layout.

David A Negrete
  • 9
  • 4
  • the problem is **how** to use z-index to achive what I need...and I can't use proper .png image that already has arrow at the bottom. – Nicolai Oct 05 '15 at 08:19
  • Use `z-index` with `nth-child` to target wrap class like this: `.wrap:nth-child(1){ z-index: 2; }` – Imran Bughio Oct 05 '15 at 08:41