Image with bottom triangle that overlay another image

Question

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:

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>

Answer 1

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