搜索
byadmin 發表於 2013-4-27 19:47:18 , 3799人已閱讀 , 0人回應
CSS三角形主要是使用 border 屬性來實現,看以下CSS程式碼:

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

  1. <div class="arrow-up"></div>
  2. <div class="arrow-down"></div>
  3. <div class="arrow-left"></div>
  4. <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.         border-bottom: 5px solid black;
  7. }

  8. .arrow-down {
  9.         width: 0;
  10.         height: 0;
  11.         border-left: 20px solid transparent;
  12.         border-right: 20px solid transparent;

  13.         border-top: 20px solid #f00;
  14. }

  15. .arrow-right {
  16.         width: 0;
  17.         height: 0;
  18.         border-top: 60px solid transparent;
  19.         border-bottom: 60px solid transparent;

  20.         border-left: 60px solid green;
  21. }

  22. .arrow-left {
  23.         width: 0;
  24.         height: 0;
  25.         border-top: 10px solid transparent;
  26.         border-bottom: 10px solid transparent;

  27.         border-right:10px solid blue;
  28. }
複製代碼
效果
2013-04-27_194400.jpg


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

Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.119264 second(s), 43 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-12-4 22:57

回頂部