这种红色向右的小箭头如何实现？

Question

就是图中的推荐作品和图书简介前面的红色向右小箭头，看不了源码所以不知道怎么写。
是用的字体还是图片呢？
经过@guangpunba的建议

#tushujianjie {
    border: 10px solid transparent;
    border-left: 10px solid red;
}

并不是三角

update：感谢各位，问题解决了。

Answer 1

1.css可以直接实现

<div class="box"><span>图书简介</span></div>
.box span{position: relative;font-size: 14px;padding-left: 16px;}
.box span:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 8px solid transparent;
    border-left:8px solid orange;
}

2.可以用字体图标 Font Awesome

http://fontawesome.io/icons/

3.可以用图片

Answer 2

你这个你把border-left的宽度值调大点

Answer 3

使用它讲的方法还要将width和height都设为0，才是三角。

Answer 4

设置的位置错了，可以单独在三角处写一个空的span标签然后设置其样式，或者是使用#tushujianjie的伪元素。

#tushujianjie:before{content:'';display:block;font-size:0;line-height:0;border: 10px solid transparent;border-left: 10px solid red;}

更一般的情况是设置三角，如下：

.abc{position:relative;}
.abc:before{content:"";display:block;border-width: 8px;position:absolute;bottom:-1px;left:29px;border-style: dashed dashed solid;border-color: transparent transparent #ddd;font-size: 0;line-height: 0;}
.abc:after{content:"";display:block;border-width: 8px;position:absolute;bottom:-2px;left:29px;border-style: dashed dashed solid;border-color: transparent transparent #fff;font-size: 0;line-height: 0;}

三角的位置及颜色自己都可以改动

Answer 5

div本身设定width和height为0，设定border大一些，这样就成了个小正方形
然后根据你想要的方向，相邻的border设定成transparent

Answer 6

这种小图标建议使用自体库。一楼兄弟回答的就很好