html – 覆盖另一图像的底部三角形图像

创建箭头 at the bottom of image很简单。

但是这可能是这样的，其中第二个图像不是背景，而是第一个图像之后的另一个图像：

我在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>

解决方法

在您链接的答案中，有两种允许您正在查找的输出的方法。

如果您看第4种方法(工具提示在图像上有一个三角形)。显示的技术与您在悬停名称时使用的工具提示相同。

虽然这种方法有更好的浏览器支持，我更喜欢使用一个svg方法(也提供在您链接的帖子)与clipPath元素使三角形在底部。

适应您的用例，可能如下所示：

*{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/output/people-q-g-600-400-1.jpg" 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/output/nature-q-c-600-400-1.jpg" 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/output/abstract-q-g-600-400-6.jpg" width="600" height="400" clip-path="url(#clip)"/>
</svg>

请注意，为简单起见，演示使用具有相同宽高比的图像。每个图像都有自己的svg标签，用于维护(例如：添加或删除图像)

输出：

关于MDN的更多信息

> clipPath
> svg