html - 底部三 Angular 形覆盖另一张图片的图片

Question

创建箭头很简单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>

Answer 1

在您链接到的答案中，有两种方法可以实现您正在寻找的输出。

如果您查看第 4 种方法(图像上方带有三 Angular 形的工具提示。)显示的技术与 facebook 在您将鼠标悬停在名称上时使用的工具提示相同。

虽然这种方法有更好的浏览器支持，但我更愿意使用 svg 方法(也在您链接到的帖子中提供)和 clipPath 元素来制作底部的三 Angular 形。

适应您的用例，它可能看起来像这样:

*{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>

请注意，为简单起见，演示使用具有相同宽高比的图像。每个图像都在其自己的 svg 标签中以实现可维护性(例如:添加或删除图像)

输出:

关于 MDN 的更多信息:

• clipPath
• svg