DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 用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其他特性定能做出更有趣的一些效果！

布局實例
CSS讓ul所有的li居中顯示的方法
 　　CSS ul li居中本來以為很容易就實現了，因為平時都是讓li float:le
CSS網頁布局實用小技巧
1、ul標簽在Mozilla中默認是有padding值的，而在IE中只有margin有值。　　2、同
CSS網頁布局中默認字體樣式
 　　拿字體來說，各個浏覽器默認的字體種類、字體大小和字體行高都不一樣，比如IE8的中文版

相關文章

布局基本知識布局實例
小編推薦
css實現適用於團購網站的橙色導航菜單代碼 淺談合理架構CSS CSS教程:DIV底部放置文字 IE6/7下多種方法移除button、input 默認邊框和去掉焦點線 CSS控制圖片、表格、背景顏色漸變示例 CSS3創建驚艷多重邊框色 CSS兼容性問題 && CSS HACK 使用CSS3制作餅狀旋轉載入效果的實例 CSS3對background的調整和增加的屬性 CSS網頁布局的技巧
熱門推薦
css3 border-image使用說明 舉例詳解CSS中position屬性的使用 CSS+DIV實現鼠標經過背景變色 CSS小技巧：隱藏input 內的文字的方法 純css實現藍色圓角效果水平導航菜單代碼 CSS3創建驚艷多重邊框色 鼠標經過圖標動畫效果 css樣式命名規范 css3學習心得分享
大家都在看
網頁設計色彩搭配寶藍色的介紹 js插件YprogressBar實現漂亮的進度條效果 JavaScript實現Java中Map容器的方法 bootstrap table小案例 分享9點個人認為比較重要的javascript 編程技巧 Raphael帶文本標簽可拖動的圖形實現代碼 jquery 動態增加刪除行的簡單實例(推薦) jquery scrollTop方法根據滾動像素顯示隱藏頂部導航條
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved