(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:
效果图:
本文中的每一个案例只写了一个方向的,其他方向的相同,仅是方向不同。
08-19
08-19
08-19