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

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. First 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;
    /*给边框设置较大的宽度时就可以看出，相邻边框的结合处是把原来的矩形切掉一个三角形然后拼接到一起的，当把左右边框设置为transparent时，上边框看起来就是一个倒梯形，又因为上边把宽度设置为了零，梯形的底边变成了零，于是就成了一个向下的三角形*/
    border-top: 25px solid #6A0136;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

引自：Milecia McG的博客