使用 CSS 產生三角形效果

CSS三角形主要是使用 border 屬性來實現，看以下CSS程式碼：

步驟1. 先產生幾個指定要變形的DIV

1. 
   
2. <div class="arrow-up"></div>
   
3. <div class="arrow-down"></div>
   
4. <div class="arrow-left"></div>
   
5. <div class="arrow-right"></div>
   

複製代碼

步驟2. 針對上面DIV的類別名稱分別寫入變形的樣式

1. .arrow-up {
   
2.         width: 0;
   
3.         height: 0;
   
4.         border-left: 5px solid transparent;
   
5.         border-right: 5px solid transparent;
   
6. 
   
7.         border-bottom: 5px solid black;
   
8. }
   
9. 
   
10. .arrow-down {
    
11.         width: 0;
    
12.         height: 0;
    
13.         border-left: 20px solid transparent;
    
14.         border-right: 20px solid transparent;
    
15. 
    
16.         border-top: 20px solid #f00;
    
17. }
    
18. 
    
19. .arrow-right {
    
20.         width: 0;
    
21.         height: 0;
    
22.         border-top: 60px solid transparent;
    
23.         border-bottom: 60px solid transparent;
    
24. 
    
25.         border-left: 60px solid green;
    
26. }
    
27. 
    
28. .arrow-left {
    
29.         width: 0;
    
30.         height: 0;
    
31.         border-top: 10px solid transparent;
    
32.         border-bottom: 10px solid transparent;
    
33. 
    
34.         border-right:10px solid blue;
    
35. }

複製代碼

效果


範例下載： css三角型效果.html (1.15 KB, 下載次數: 5)

2013-4-27 19:47 上傳

點擊文件名下載附件