css画横线箭头_如何用纯CSS实现的箭头的效果？

《如何用纯CSS实现的箭头的效果？》要点：

本文介绍了如何用纯CSS实现的箭头的效果？，希望对您有用。如果有疑问，可以联系我们。

用CSS即可绘制出各种箭头，无需裁剪图片，甚至没有用到CSS3的东西。对浏览器支持良好。

基本原理

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

一个梯形

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

#demo11 {

border: 10px solid #000;

border-left-color: #f00;

width: 10px;

height: 10px;

}

一个三角形

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

#demo12 {

border: 10px solid #000;

border-left-color: #f00;

width: 0;

height: 0;

}

任意角度的三角形

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

#demo14 {

border: 10px solid transparent;

border-left: 20px solid #f00;

width: 0;

height: 0px;

}

通过伪元素实现

三角形可以通过伪元素绘制出&