原理：
利用边框颜色覆盖（块级标签内联）的效果，取部分图案：如果把一侧的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.*/
}