创建箭头
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的更多信息
