纯CSS写三角形-border

(1)无边框的三角形（三角形本身就是border）
HTML:

CSS:

效果图：

(2)有边框的三角形
a)在上面的(1)的基础上继续添加(只要添加css就可以，HTML不变)

效果图：

（注意：边框的宽度，个人根据实际情况而定。给标签添加:after，边框的数据不是很好调整。）
b)下面换一种方法：
HTML:

CSS:

效果图：

c)空心的三角形或者"<"
其实就是在b)的一样，只是把实心部分的蓝色blue，改为空白#fff即可
css:
效果图：

调整.box2 span中的top值，可变成"<"
css:

效果图：

(3)气泡框的三角形
HTML:

CSS:

效果图：

(4)东北、东南、西北、西南三角形的写法
HMTL:

CSS:

效果图：

本文中的每一个案例只写了一个方向的，其他方向的相同，仅是方向不同。