.sanjiao{
border:10px solid transparent//透明边框
border-bottom-color:#ff0000//红色底边框,也就是红色箭头
display:block
}
<span class="sanjiao"></span>
写好之后再用定位属性定位到想要的位置即可。
当然用图片也可以的。
其实很简单,使用绝对定位就可以了,先设置一个盒子作为图片和箭头的父级盒子,然后设置一个盒子,width为100%;图片自适应盒子。 然后设置一个放箭头的盒子,大小根据你的实际情况设置。然后给父级盒子设置position: relative给子级的箭头盒子设置position: absolute
例如:
<div class="box">
<div class="box-img">
<img src="images/a001.png"/>
</div>
<div class="box-jt">
<img src="images/箭头.png"/>
</div>
</div>
.box{
width:80%
margin:0 auto
position: relative
}
.box-img{
width:100%
}
.auto-img{
width:100%
display: block
}
.box-jt{
width:80px
position: absolute
top:50%
left:50%
transform: translate(-50%, -50%)
}