用纯CSS实现的箭头

原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解：

一个梯形

当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形；

 

<div id="demo11"></div>

<style>
#demo11 {
  border: 10px solid #000;
  border-left-color: #f00;
  width: 10px;
  height: 10px;
}
</style>

一个三角形

当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形。

 

<div id="demo12"></div>

<style>
#demo12 {
  border: 10px solid #000;
  border-left-color: #f00;
  width: 0;
  height: 0;
}
</style>

任意角度的三角形

改变各个边的宽度，即通过调整“边框”厚度可以配置出任意角度

 

<div id="demo14"></div>

<style>
#demo14 {
  border: 10px solid transparent;
  border-left: 20px solid #f00;
  width: 0;
  height: 0px;
}
</style>