使用 CSS 绘制三角形

纯 CSS 方式绘制三角箭头

.triangle-top {
  width: 0;
  height: 0;
  border-bottom: blue solid 12px;
  border-left: transparent solid 12px;
  border-right: transparent solid 12px;
}
.triangle-right {
  width: 0;
  height: 0;
  border-left: blue solid 12px;
  border-top: transparent solid 12px;
  border-bottom: transparent solid 12px;
}
.triangle-bottom {
  width: 0;
  height: 0;
  border-top: blue solid 12px;
  border-left: transparent solid 12px;
  border-right: transparent solid 12px;
}
.triangle-left {
  width: 0;
  height: 0;
  border-right: blue solid 12px;
  border-top: transparent solid 12px;
  border-bottom: transparent solid 12px;
}

给箭头添加 1 像素边框

.triangle-top {
  position: relative;
  width: 0;
  height: 0;
  border-bottom: blue solid 12px;
  border-left: transparent solid 12px;
  border-right: transparent solid 12px;
}
.triangle-top::after {
  position: absolute;
  left: -1px;
  bottom: -12px;
  display: block;
  content " ";
  border-bottom: blue solid 11px;
  border-left: transparent solid 11px;
  border-right: transparent solid 11px;
}