css 在边框上画箭头

CSS中可以使用边框来画箭头，非常实用。

.arrow {
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: transparent transparent #000 transparent;
}

上面的代码中，我们给一个div添加了一个边框。由于边框的上下左右宽度都是10px，所以画出来是一个正方形。但是这个正方形只有一条边是有颜色的，其他三条边颜色都是透明的。因此只有这一条边会呈现箭头的形状。

使用上面的代码，我们得到的箭头是尖角向上的。如果想要箭头朝下，只需要将border-color属性改成transparent #000 transparent transparent，其他部分一样。

.arrow-up {
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: transparent transparent #000 transparent;
}
.arrow-down {
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: #000 transparent transparent transparent;
}
    

同理，如果想要左、右箭头，只需要将border-color设置为#000 transparent transparent transparent或transparent transparent transparent #000，其他部分代码不变。

通过CSS在边框上画箭头，非常简单易懂，而且不需要用到图片等资源，可以大大优化网页的加载速度。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！