How To Put Arrows at the Bottom of a Div（给一个div元素下边加个向下箭头的方法）

Posted 2021-02-01 lixiang12

You’ll only need html and CSS to make this element.（这个方法只需要用到html和css）

The HTML is simple. All you need is a div element with a class name. Here’s what that looks like:（先写个div元素，再给他加个类，就像下边这样）

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

The style for the .bottom-arrow class is easy enough to write.（接下来是css的部分，首先通过类选择器给div元素加个底部边框样式，方便看出来他的存在，代码如下）

.bottom-arrow {
    border-bottom: 5px solid #6A0136;  
}

The way you make the arrow is where it gets interesting. you’ll start by using the pseudo-class selector, :after.（然后通过:after伪类选择器来制作箭头效果，添加如下样式代码）

.bottom-arrow:after {
    /*箭头效果是通过边框来实现的，所以必须先用content生成一个行内框*/
    content:‘‘;
    /*通过绝对定位让这个行内框居中*/
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    /*把这个行内框的高度和宽度都设置为零，这样四个边框就会挨在一起*/
    width: 0;
    height: 0;
    /*给边框设置较大的宽度时就可以看到，相邻边框的结合处是把原来的矩形切掉一个三角形然后拼接到一起的，当把左右边框设置为透明时，上边框就成了一个倒梯形，又因为上边把宽度设置为零，梯形的底边变成了零，于是就成了一个向下的三角形，箭头效果就做出来了*/
    border-top: 25px solid #6A0136;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

It’s not so bad. You just have to know how CSS works and how it can be manipulated. There are probably 100 other ways of doing this same thing, but this is the way I figured out how to do it.I hope this quick run through helps! （做出来的箭头还算可以，其实你只需要理解其中css是如何工作的就可以，做一个箭头有成百上千种方法，这是作者分享的方法，希望对你有所帮助）

引自：Milecia McG的博客