纯CSS绘制三角形（多个角度）



运用CSS3绘制三角形的方法

HTML代码：

[html] view plaincopyprint?

1. <div class="triangle"></div>  

<div class="triangle"></div>

这里的div也可以写span p 等元素替代

1、上三角

 

[html] view plaincopyprint?

1. .box{  
2.   width: 0;  
3.   height: 0;  
4.   border-left: 50px solid transparent;  
5.   border-right: 50px solid transparent;  
6.   border-bottom: 100px solid #2894d2;  
7. }  

.box{  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-bottom: 100px solid #2894d2;}

2、下三角

[html] view plaincopyprint?

1. .box{   
2.   width: 0;  
3.   height: 0;  
4.   border-left: 50px solid transparent;  
5.   border-right: 50px solid transparent;  
6.   border-top: 100px solid #2894d2;  
7. }  

.box{   width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-top: 100px solid #2894d2;}

3、左三角

[html] view plaincopyprint?

1. .box{  
2.   width: 0;  
3.   height: 0;  
4.   border-top: 50px solid transparent;  
5.   border-right: 100px solid #2894d2;  
6.   border-bottom: 50px solid transparent;  
7. }  

.box{  width: 0;  height: 0;  border-top: 50px solid transparent;  border-right: 100px solid #2894d2;  border-bottom: 50px solid transparent;}

4、右三角

[html] view plaincopyprint?

1. .box{  
2.   width: 0;  
3.   height: 0;  
4.   border-top: 50px solid transparent;  
5.   border-left: 100px solid #2894d2;  
6.   border-bottom: 50px solid transparent;  
7. }  

.box{  width: 0;  height: 0;  border-top: 50px solid transparent;  border-left: 100px solid #2894d2;  border-bottom: 50px solid transparent;}

5、左上三角

[html] view plaincopyprint?

1. .box{  
2.   width: 0;  
3.   height: 0;  
4.   border-top: 100px solid #2894d2;     
5.   border-right: 100px solid transparent;  
6. }  

.box{  width: 0;  height: 0;  border-top: 100px solid #2894d2;     border-right: 100px solid transparent;}

6、右上三角

[html] view plaincopyprint?

1. .box{  
2.   width: 0;  
3.   height: 0;  
4.   border-top: 100px solid #2894d2;    
5.   border-left: 100px solid transparent;   
6. }  

.box{  width: 0;  height: 0;  border-top: 100px solid #2894d2;    border-left: 100px solid transparent; }

7、左下三角

[html] view plaincopyprint?

1. .box{  
2.   width: 0;  
3.   height: 0;  
4.   border-bottom: 100px solid #2894d2;  
5.   border-right: 100px solid transparent;  
6. }  

.box{  width: 0;  height: 0;  border-bottom: 100px solid #2894d2;  border-right: 100px solid transparent;}

8、右下三角

[html] view plaincopyprint?

1. .box{  
2.   width: 0;  
3.   height: 0;  
4.   border-bottom: 100px solid #2894d2;  
5.   border-left: 100px solid transparent;  
6. }  

转载于：http://blog.csdn.net/ld_____/article/details/48597233