创建箭头
at the bottom of image很简单。
@H_301_2@但是这可能是这样的，其中第二个图像不是背景，而是第一个图像之后的另一个图像：
@H_301_2@我在codepen.io创建了“钢笔”
@H_301_6@.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;
}
@H_301_6@<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>
解决方法
在您链接的答案中，有两种允许您正在查找的输出的方法。
@H_301_2@如果您看第4种方法(工具提示在图像上有一个三角形)。显示的技术与您在悬停名称时使用的工具提示相同。
@H_301_2@虽然这种方法有更好的浏览器支持，我更喜欢使用一个svg方法(也提供在您链接的帖子)与clipPath元素使三角形在底部。
@H_301_2@适应您的用例，可能如下所示：
@H_301_6@*{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;
}
@H_301_6@<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>
@H_301_2@请注意，为简单起见，演示使用具有相同宽高比的图像。每个图像都有自己的svg标签，用于维护(例如：添加或删除图像)
@H_301_2@输出：
@H_301_2@关于MDN的更多信息
@H_301_2@> clipPath
> svg
> svg
