萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 用CSS3繪制三角形的簡單方法

用CSS3繪制三角形的簡單方法

   利用CSS的border以及它的屬性值transparent來實現三角形,其中最主要的是要明白由於div的高度跟寬度都為0,margin,padding也為0,所以元素框的大小就是他的border的疊加,由於相鄰boder會重疊,故存在內容寬高時其實任意一邊存在的border都是梯形的,當div內容寬高為0時,border就表現為三角形,將四個border的顏色設置為transparent表示邊框透明,而將右邊框顏色再設置為紅色就發現三角形出現了,其實這個三角形是右邊框。

  CSS Code復制內容到剪貼板

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <style>
  5. #triangle-up {
  6. width: 0px;
  7. height: 0px;
  8. border: 100px solid transparent;
  9. border-right: 100px solid red;
  10. }
  11. </style>
  12. <div id="triangle-up"></div>
  13. </body>
  14. </html>

       圖解

      正常的框模型,div的內容width以及height均為50px.黑線劃出來的區域就是它的右邊框,呈現為一個梯形

      CSS Code復制內容到剪貼板
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <style>
  5. #triangle-up {
  6. width: 50px;
  7. height: 50px;
  8. border: 100px solid red;
  9. border-bottom: 100px solid red;
  10. }
  11. </style>
  12. <div id="triangle-up"></div>
  13. </body>
  14. </html>

2015717191517568.png (600×590)

        當div的內容width以及height均為0.黑線劃出來的區域就是它的右邊框,呈現為一個三角形

        CSS Code復制內容到剪貼板
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <style>
  5. #triangle-up {
  6. width: 0px;
  7. height: 0px;
  8. border: 100px solid red;
  9. }
  10. </style>
  11. <div id="triangle-up"></div>
  12. </body>
  13. </html>

2015717191550621.png (600×593)

       當div的內容width以及height均為0.上下左邊框都為透明的時候,只有右邊框顯示為紅色,三角形就看到了

       CSS Code復制內容到剪貼板
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <style>
  5. #triangle-up {
  6. width: 0px;
  7. height: 0px;
  8. border: 100px solid transparent;
  9. border-right: 100px solid red;
  10. }
  11. </style>
  12. <div id="triangle-up"></div>
  13. </body>
  14. </html>

2015717191614499.jpg (600×593)

        結合css其他特性定能做出更有趣的一些效果!

copyright © 萬盛學電腦網 all rights reserved