纯css 画箭头，画三角形

css画箭头

<div>
  <div>
    <span class="arrow arrow-up"></span>
  </div>
  <div>
    <span class="arrow arrow-bottom"></span>
  </div>
  <div>
    <span class="arrow arrow-left"></span>
  </div>
  <div>
    <span class="arrow arrow-right"></span>
  </div>
</div>
<!--样式-->
<style>
.arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid #878787;
  border-width: 1px 1px 0 0;
  background: none;
}
.arrow-up {
  transform: rotate(-45deg);
}
.arrow-bottom {
  transform: rotate(135deg);
}
.arrow-left {
  transform: rotate(45deg);
}
.arrow-right {
  transform: rotate(-135deg);
}
</style>

效果

css画三角形

参考：https://www.cnblogs.com/chengxs/p/11406278.html

<div class="triangles">
   <div class="triangle triangle-up"></div>
  <div class="triangle triangle-down"></div>
  <div class="triangle triangle-left"></div>
  <div class="triangle triangle-right"></div>
</div>
<style>
.triangles {
  display: flex;
}
.triangle {
  height: 0;
  width: 0;
  border-style: solid;
}
.triangle-up {
  border-width: 0 10px 12px 10px;
  border-color: transparent transparent red transparent;
}
.triangle-down {
  border-width: 12px 10px 0 10px;
  border-color: green transparent transparent transparent;
}
.triangle-left {
  border-width: 10px 12px 10px 0;
  border-color: transparent gray transparent transparent;
}
.triangle-right {
  border-width: 10px 0 10px 12px;
  border-color: transparent transparent transparent blue;
}
</style>

效果图