用CSS border相关属性画三角形

1. <!doctype html> 
2. <html lang="en"> 
3.   <head> 
4.     <meta charset="utf-8"> 
5.     <title>CSS Triangle Demo</title> 
6.     <link rel="stylesheet" href="triangle.css"> 
7.   </head> 
8.  
9.   <body> 
10.     <h3>Down Triangle</h3> 
11.     <div class="down-triangle"> 
12.     </div> 
13.  
14.     <h3>Up Triangle</h3> 
15.     <div class="up-triangle"> 
16.     </div> 
17.  
18.     <h3>Left Triangle</h3> 
19.     <div class="left-triangle"> 
20.     </div>     
21.  
22.     <h3>Right Triangle</h3> 
23.     <div class="right-triangle"> 
24.     </div>         
25.   </body> 
26. </html> 

CSS代码如下：
 

1. .down-triangle { 
2.    width: 0; 
3.    height: 0; 
4.    border-width: 10px 10px 0 10px; 
5.    border-style: solid; 
6.    border-color: #dc291e transparent; 
7. } 
8.  
9. .up-triangle { 
10.    width: 0; 
11.    height: 0; 
12.    border-width: 0px 10px 10px 10px; 
13.    border-style: solid; 
14.    border-color: #dc291e transparent; 
15. } 
16.  
17. .left-triangle { 
18.    width: 0; 
19.    height: 0; 
20.    border-width: 10px 10px 10px 0px; 
21.    border-style: solid; 
22.    border-color: transparent #dc291e; 
23. } 
24.  
25. .right-triangle { 
26.    width: 0; 
27.    height: 0; 
28.    border-width: 10px 0px 10px 10px; 
29.    border-style: solid; 
30.    border-color: transparent #dc291e; 
31. } 

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠