几句简单的 css 代码,就可以绘制出一个数学三角形。简单,实用,是替换三角图片的不二选择,当然 IE6 除外。css 三角形,已不新鲜,随处可见,它巧妙地运用了 css 里面的一个小技巧。

如果一张网页中的某些地方需要使用一些三角图片,正常思维都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个 hover 的样式,也许箭头是反的。不管,正的反的,它都需要一张图片。

那有没有更好的办法呢,毕竟要用一张,或者图片来解决这么一个小问题,是不是有点太浪费资源了,于是,各大论坛里就有一个 css 三角形的解决样式。用到的只需 css 的一个属性,那就是 border。

先看一下正常盒子模型,添加边框的效果:

我们更改下左边框和右边框的颜色,再看看效果:

我们再改变下盒子的宽度和高度:

nice! 出现了 4 个三角形了,然后我们如果需要左边那个css 三角形,有两种方法:

1、将 border 的 top、right、bottom 设置成背景色(IE6 效果不错,看不出问题);

2、将 border 的 top、right、bottom 设置成透明色同时设置 background 为 transparent(IE6, 有问题了,是不支持 border-color: transparent 的)。

最终效果:

分别改变下 left、right、bottom、top 四个边框的颜色,就可以得到 4 个不同方向的 css 三角形 了,东西很简单,但想到用 border 边框来制作 css 三角形 箭头,确是相当地巧妙,最后贴下代码。

本文地址 https://shaoshilei.com/2014-03/use-css-to-draw-a-triangle-isosceles.html