react CSS实现箭头图标

参考链接：
css3实现小箭头，各种图形
https://blog.csdn.net/tangtang5963/article/details/51490107

针对于三角形图标，以前的做法基本上是以图片实现上/下/左/右三角形图标。
但是，这样会导致项目空间变大，也即占用了空间，在传输的时候可能多一点时延。
为了解决这个问题，现在常用的方式是利用CSS实现箭头图标。

查看css参考手册，对于transparent属性的定义是：用来指定全透明色彩。

transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。

在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
在CSS2中，border-color也开始接受transparent作为参数值。
在CSS3中，transparent被延伸到任何一个有color值的属性上。

对border属性的top、bottom、left、right分别赋色。

可以看出，一个正方体被划分为全等的四个三角形。

如果把左、右、下的颜色设置为透明，那么就是一个箭头向下的三角形了。

//css代码
.content{
	border-top:12px solid red;
	border-left:12px solid transparent;
	border-right:12px solid transparent;
	border-bottom:12px solid transparent;
}

三、其他样式
（1）css3实现心形

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}