如何用CSS画三角形

发表于   |   分类于   |  

今天在微博上看到一个分享，说是如何画三角形，以前就学过，现在整理一下。
首先，写一个div，border设置成10px。

1
2
3
4
5
6
7
8
#sty1{  
    height: 100px;  
    width: 100px;  
    background: red;  
    border-width: 10px;  
    border-style: solid;  
    border-color: black;  
}

效果如图：
效果图

border是分为上右下左的四个部分，这四个部分究竟如何分界的？现在将四部分均设置不同的颜色来看下。

1
2
3
4
5
6
7
8
#sty1{  
    height: 100px;  
    width: 100px;  
    background: red;  
    border-width: 10px;  
    border-style: solid;  
    border-color: black green gray pink;  
}

效果如图：
效果图

如果这时候我们将上左右的边界颜色设置成透明，

1
2
3
4
5
6
7
8
#sty1{  
    height: 100px;  
    width: 100px;  
    background: red;  
    border-width: 10px;  
    border-style: solid;  
    border-color: black green gray pink;  
}

效果如图：
效果图

这时候就出现了一个梯形，梯形的上边其实就是盒子模型的宽，下边就是盒子模型的宽+左右border的宽。高即为下边border的宽了。所以，只要我们将盒子的width设置成0，就可以看到一个三角形了。

1
2
3
4
5
6
7
8
#sty1{  
    height: 0px;  
    width: 0px;  
    background: red;  
    border-width: 10px;  
    border-style: solid;  
    border-color: transparent transparent black transparent;  
}

效果如图：
效果图

这个三角形的底边是左右border宽之和，高为下边border的宽。所以改变相应的宽度可以得到不同的三角形。

钝角三角形：
效果图

直角三角形：
效果图

今天微博上还有分享了一个三角形产生器，大家可以点击进去看看