<实际需求中,很多时候都会有箭头的情况,只不过一开始总是喜欢找别人写好的,随着需求的增加,很难通过修改来满足需求,所以理解原理自己动手才是万难的根本解决办法。
一、绘制三角
容器:
<div class='jt'></div>
样式:
.jt{
width:0;
height:0;
border:50px solid;
border-color: red yellow green blue;}*
效果如图:
利用border绘制了四个三角组成的矩形,现在要绘制三角形,只需要让其他任意三个三角形变为透明即可。
修改代码:
border-color: red transparent transparent transparent;
二、绘制箭头
利用三角绘制箭头,只需要再绘制一个和此三角大小相同,方向相同的三角,颜色和背景颜色一样,覆盖在此三角上面,通过少量的位移形成箭头。