前言

Hello，前端的小伙伴们，你们好啊。今天给大家带来的是怎么用css来制作一个三角箭头，前几天我在做某个功能的时候，正好需要一个三角箭头的图，但是不想用图片，就想从网上找一下有没有可以通过css实现的方式，结果还真有……那还等啥，话不多说，直接开干。

要制作的效果图如下：

原理

实现这个效果的可能有好多种方式， 我说一下我比较喜欢的一个方式：css中的border属性。

平时用到border属性最多的地方就是给一个元素设置边框效果，设置如下：

border: 1px solid grey;

效果如下：

大部分同学也是这样的用的，其实 border 不是由四个矩形框组合成的，而是由四个三角形组合成的。把数值设置大点看一下：

width: 100px;
height: 100px;
border: 50px solid grey;
// 这里为好看，设置一下border-color属性
border-color: gray red yellow black;

效果如下：

中间空白是因为设置了 width和height属性，把这两个属性设置成 0px 看一下:

这样就可以看出border确实是由四个三角组合成的，我们就可以利用这个属性来实现三角箭头。

制作

html代码如下：

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

css代码如下：

.arrow {
  width: 0px;
  height: 0px;
  border-width: 40px 40px 0 40px;
  border-style: solid;
  border-color: gray transparent transparent transparent;
}

效果同第一张图

解释一下 border-width 和 border-color这两个属性吧。

border-width：按顺时针方向，依次设置：top right bottom left 四个大小。可以看出只有bottom方向上设置是 0。为什么不把left 和 right 也设置成 0 呢，要是把 left 和 right设置成0， 就不显示了，在 x 轴方向上宽度就是 0。

border-color：按顺时针方向，依次设置：top right bottom left 四个颜色。可以看出只有top方向上设置是 gray，其它都是设置透明，这样就可以只显示顶部的border

通过上面的设置，我们还可以做出很多种样式的三角箭头，只不过是设置不同的值而已，感兴趣的同学可以自己试一下，这里看一下几个不一样的三角箭头。如下图：

好了，今天就介绍到这里，喜欢的小伙伴记得评论转发点赞哦~