css三角形 纯CSS实现三角形的做法

当我们做网页时，我们需要使用一个类似下拉菜单的三角形图标。虽然可以通过图片等方法实现，但是不方便修改，所以一般都是纯CSS实现。

1.利用边界属性实现三角形

这个原理很简单。我们先来看下图，是一个边框为20px的div。看它的边框，是梯形，变化就从这里开始。

四个边框都变成了三角形。现在我把左、右、下边框的颜色设置成透明或者和背景一样的颜色，我们想要的三角形就出来了。

注意:在IE6下，边框设置为透明时，会有深色阴影，不会透明。将边框样式设置为虚线可以解决这个问题。

就这样，一个三角形出来了！

2.使用CSS3变换旋转45度实现三角形

首先，创建一个带边框的div，设置背景色和两个相邻边框的颜色，然后选择45度。

注意:在IE6下无效。

实现风格代码: