css 实现三角形箭头

1. 插入DOM

<div id="triangle1"></div>
<div id="triangle2"></div>

#triangle1 {
  width: 0px;
  height: 0px;
  border: 19px solid transparent;
  border-left: 26px solid #fff;
  position: absolute;
  top: -1px;
  left: -2px;
  z-index: 2;
}

#triangle2 {
  width: 0px;
  height: 0px;
  border: 20px solid transparent;
  border-left: 27px solid #000;
  position: absolute;
  top: -2px;
  left: -2px;
}

2. 使用伪类

<div id="triangle"></div>
#triangle{
  position: relative;
  width:100px;
  height:20px;
  background-color:#000;
}
#triangle:after, #triangle:before {
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: -20px;
  content: ' '
}

#triangle:before {
  border-left-color: #000;
  right: -21px;
}

参考：
用纯CSS实现的箭头
CSS画三角形原理
css整理 -- 右箭头，上下箭头，三角形

这个有食豆人哦