如何用 CSS 画三角形和箭头

时间:2022-01-04 来源:未知网络 作者:996建站网

三角形和箭头这两个图标在网页中经常会用到,例如:下拉选择框、排序、返回到上一页、导航条,分页都会用到三角形或者箭头,当然是用图片的方式的确可以实现这一样式,但是是用图片如果调整颜色那就比较困难了,除非再做一张图片,这样的做不仅浪费开发成本并且会降低网页性能。我们可以采用 CSS 画出三角形或者箭头:

使用 border 画三角形和箭头

一条边框在和模型中其实并不是一条线,如果我们将边框设置得足够大,并且设置不同的颜色,我们就很容易看到边框的本质,从下图很容易可以看出其事 border 在一个正方形 DOM 上其实是一个梯形:

如何用 CSS 画三角形和箭头插图

画三角形

利用这一原理我们可以将 DOM 的高和宽设置为 0 像素,通过设置边框的颜色透明来画出不同的三角形,当然也可以来设置 border 的宽度来画出不同角度的三角形:

如何用 CSS 画三角形和箭头插图

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid #ccc;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

如何用 CSS 画三角形和箭头插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序