前端指向箭头的设计

css画箭头的方式

指向箭头其实就相当于在div中画一个正方形的div在画一个三角形的div然后将他们拼接起来。

长方形通过调整width和height来调整长方形的大小，而三角形通过border-left和border-right来调整左右

三角形的这是50的时候

这是25的时候

而三角形的顶点是根据border-top:这个值来改变的

.triangle-down {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 25px solid #66ABE3;
 }

长方形

.square {
     width: 20px;
     height: 80px;
     margin-left: 40px;
     background: #66ABE3;
 }

最后需要移动三角形的画只要移动最外面的div即可。

// 通过移动这个div实现三角形移动
<div v-if="shareholderflag" class="as" style="margin-top: 20px;">
	<div class="square"></div>			// 长方形
	<div class="triangle-down"></div>		// 三角形
</div>