使用传统的css方法制做一个三角形

一. 使用css制作一个三角形

对应的html页面的代码：

//html 的骨架这里我就不写了，直接写我要用的
// 定义一个类名叫Triangle（三角形）的div盒子
s

对应的css样式代码：

不要给它设置宽高，通过设置border就可以 了

.triangle {
    width: 0;
    height: 0;
    margin: 100px auto;
    
    //处理IE6的最小高度问题
    overflow: hidden;
    
    
    border-width: 50px;
    
    //定义三角形朝向那个方向，就在哪个方向设置相应的颜色，其他方向的设置为透明即可；
    // 注意顺序是： 上 -> 右 -> 下 -> 左
    border-color: transparent transparent green transparent;
    
    //border-style: solid;
    // 如果你这样写的话，在其他浏览器上是没有问题的，正常显示的三角形；
    //但是在IE6上是有问题的，其他三个方向会有黑色的边边来代替，怎么解决这个恶心的bug？
    
    
    // 解决IE6下的BUG（在IE6下其他没设颜色的会有黑色颜色代替）
    //将设为transparent的边设为虚线，剩下的设为实线，这样在IE6下就能正常显示了
    border-style: dashed dashed solid dashed;
    
}

制作需要注意的问题

问题1：不要给元素设置宽高，使用border属性就行了；
问题2：设置overflow: hidden;来处理IE6的最小高度问题；
问题3： 将设为transparent的边设为虚线，带颜色的设为实线solid，解决IE6下的BUG，这样在IE6下就能正常显示了；

---

如果工作中需要做大量的不同方向的三角形，可以参考LESS语法中的匹配模式，它会让你事半功倍，也可以看我的下篇文章。