CSS常用样式——绘制单（双）箭头的多种方法（2）

作者：程序员学院   官方网址：https://www.chengxuyuan.com

1、前言

今天帮大家总结一下CSS绘制箭头的多种方法。

2、开始绘制单个箭头

（1）方法一

首先我们绘制一个正方形模块，同时给他上、右边框（只要是相邻的两个边距都是可以的~），包括边框颜色和宽度，该设置决定了箭头的宽度和颜色，最后旋转即可。

注意：旋转的中心为盒子模型的几何中心。

右边为旋转后

（2）方法二

第二种方法我们用模块的伪类:after和:before和上一篇文章（）j介绍的绘制直角三角形的方法来实现。

首页我们用伪类:after和:before绘制两个相同大小、相同方向的三角形，一个设置为箭头颜色的背景，另一个与底色相同的颜色，两个相重叠，但要有一定距离的便宜，作为箭头的大小。

这两种方法，均可以用标签或标签的伪类来完成，相比而言，个人觉得第一种方法比较简单。

3、双箭头

学会制作了单箭头，双箭头我们制作起来就很容易了，

（1）方法一

这里利用的是标签的伪类:after和:before

（2）方法二

怎么样？有没有get起来？