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



运用CSS3绘制三角形的方法

HTML代码：

[html] view plain copy print ?

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

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

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

1、上三角

 

[html] view plain copy print ?

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 plain copy print ?

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 plain copy print ?

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 plain copy print ?

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 plain copy print ?

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 plain copy print ?

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 plain copy print ?

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 plain copy print ?

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