原理：
利用边框颜色覆盖（块级标签内联）的效果，取部分图案：如果把一侧的border去掉，还能形成半角。
代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .arrow{ display: inline-block; border-top: 10px solid black; border-right: 10px solid red; border-bottom: 10px solid pink; border-left: 10px solid blue; /*想要哪边箭头，直接把另外三边的颜色改成透明:transparent.*/ } </style></head><body> <div class="arrow"></div></body></html> |
效果：
半角：
1 2 3 4 5 6 7 8 | .arrow{ display: inline-block; border-top: 10px solid black; /*border-right: 10px solid transparent;*/ border-bottom: 10px solid transparent; border-left: 10px solid transparent; /*想要哪边箭头，直接把另外三边的颜色改成透明:transparent.*/} |
半角效果：
