几句简单的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 三角形箭头,确是相当地巧妙,最后贴下代码。

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