css怎么绘制箭头？

在网页制作中，很多时候都会有箭头的情况，我们可以使用css来绘制箭头，css是如何绘制箭头的呢？下面我们来看一下使用css绘制箭头的方法。

我们可以使用css绘制三角形来制作箭头。

 

一、绘制三角

html代码：

<div></div>

css代码：

.container{
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: red yellow green blue;}

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

修改代码：

border-color: red transparent transparent transparent;

效果图：

​​二、绘制箭头

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

css样式：

.container{
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: red transparent transparent transparent;
    position: relative;}.container::after{
    content: '';
    position: absolute;
    top: -55px;
    left: -50px;
    border: 50px solid;
    border-color: white transparent transparent transparent;}

效果图：