css画横线箭头_CSS绘制箭头

实际需求中，很多时候都会有箭头的情况，只不过一开始总是喜欢找别人写好的，随着需求的增加，很难通过修改来满足需求，所以理解原理自己动手才是万难的根本解决办法。

一、绘制三角

容器：

样式：

.container{

width: 0;

height: 0;

border: 50px solid;

border-color: red yellow green blue;

}

效果如图：

三角

利用border绘制了四个三角组成的矩形，现在要绘制三角形，只需要让其他任意三个三角形变为透明即可。

修改代码：

border-color: red transparent transparent transparent;

单个三角

二、绘制箭头

利用三角绘制箭头，只需要再绘制一个和此三角大小相同，方向相同的三角，颜色和背景颜色一样，覆盖在此三角上面，通过少量的位移形成箭头。

像这样

.container{

width: 0;

height: 0;

border: 50px solid;

border-color: red transparent transparent transpar