创建图片底部的箭头 很简单。
但是是否可以实现像这样的效果,其中第二个图像不是背景,而是在第一个图像之后:
我在 codepen.io 上创建了 "pen"。
.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>