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

作者：程序员学院

官方网址：www.chengxuyuan.com

1、前言

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

2、开始绘制单个箭头

（1）方法一

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

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

HTML代码：

<div class="arrow-right"></div>

CSS代码：

.arrow-right {
    width: 60px;
    height: 60px;
    background-color: transparent; /* 模块背景为透明 */
    border-color: #f02c57;
    border-style: solid;
    border-width: 6px 6px 0 0;
    margin: 300px auto;
    transform: rotate(45deg);  /*箭头方向可以自由切换角度*/
}

（2）方法二

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

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

HTML代码：

<div class="arrow-right"></div>

CSS代码：

.arrow-right {
    width: 100px;
    height: 100px;
    position: relative;
    margin:300px auto;
}
.arrow-right:before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    border:100px solid;
    margin-top: -100px;
    border-color: transparent transparent transparent #f02c57; /* 箭头颜色 */
}
.arrow-right:after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 10px; /*位置偏移，决定箭头的粗细*/
    width: 0;
    height: 0;
    border:100px solid;
    margin-top: -100px;
    border-color: transparent transparent transparent #fff; /* 与模块底色相同*/
}

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

3、双箭头

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

（1）方法一

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

HTML代码：

<div class="arrow-right"></div>

CSS代码：

.arrow-right {
    width: 100px;
    height: 100px;
    margin: 300px auto;
    display: flex;
}

.arrow-right::before,
.arrow-right:after {
    content: "";
    width: 100px;
    height: 100px;
    background-color: transparent;/* 模块背景为透明 */
    border-color: #f02c57;
    border-style: solid;
    border-width: 6px 6px 0 0;
    transform: rotate(45deg);
}

（2）方法二

HTML代码：

<div class="arrow-right">
    <span></span>
    <span></span>
</div>

CSS代码：

.arrow-right {
    display: flex;
    width: 400px;
    height: 400px;
    margin: 400px;
}
.arrow-right span {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 20px;
}
.arrow-right span:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    border: 100px solid;
    margin-top: -100px;
    border-color: transparent transparent transparent #f02c57; /* 箭头颜色 */
}
.arrow-right span:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 10px; /*位置偏移，决定箭头的粗细*/
    width: 0;
    height: 0;
    border: 100px solid;
    margin-top: -100px;
    border-color: transparent transparent transparent #fff;/* 与模块底色相同*/
}

怎么样？有没有get起来？