首頁 > 開發者 > 網站開發

css實現三角形及應用樣本

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

css實現三角形，網上講了很多，但我發現一般都是三角向上或者向下的，向左向右這兩方向似乎講得很少，本人試了一下，發現原來在IE下很難搞~~(萬惡的IE)...
css實現三角形的原理是：當元素的寬高為0，邊框(border)不為0時，四個角邊框交界重疊處分45度角平分。講得很彆扭~~~上個圖吧：
            .triangle {               
                border-color: red green blue pink;
                border-style: solid;
                border-width: 20px 20px 20px 20px;
                width: 0;
                height: 0;
            }

<div class="triangle"/>
    </div>


那麼，我們只有留下一條邊框的時候會發現什嗎？？

            .triangle {              
                border-color: red transparent transparent transparent;
                border-style: solid;
                border-width: 20px 20px 0px 20px;
                width: 0;
                height: 0;
            }

 



 怎樣？出來了吧~~

同樣道理，我們改成為向左向右的，

 

向左：     .triangle {              
                border-color: transparent red transparent transparent;
                border-style: solid;
                border-width: 20px 20px 20px 0px;
                width: 0;
                height: 0;
            }

向右：   .triangle {               
                border-color: transparent transparent transparent red;
                border-style: solid;
                border-width: 20px 0px 20px 20px;
                width: 0;
                height: 0;
            }

大功造成！？ 慢，你用的是什麼瀏覽器？如果用的是非IE6的話，恭喜你！下面我們用IE6（咬牙切齒ing...），



 汗~~~~

 

原來，IE6預設給了背景黑色~~

只有好用IE專有的東東了，解鈴還需系鈴人（~_~）

首先，css hack，用底線"_"！

                _border-top-color: white;
                _border-bottom-color: white;
然後用chroma filter ：      _filter: chroma( color =white);

其實就是把不要的邊過濾掉！

還要加上                font-size: 0;  line-height: 0;   

這樣就徹底的去掉了黑色背景：

 

            .triangle {
                border-color: transparent  transparent transparent red;
                border-style: solid;
                border-width: 20px 0px 20px 20px;
                font-size: 0;
                line-height: 0;    
                width: 0;
                height: 0;
                _border-top-color: white;
                _border-bottom-color: white;
                _filter: chroma( color =white);
            }


html+css:

Js代碼  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.         <title>css三角形</title>  
  6.         <style>  
  7.             .tipArrow {  
  8.                 /*右邊有顏色，其他透明*/  
  9.                 border-color: transparent #e00 transparent transparent;  
  10.                 border-style: solid;  
  11.                 border-width: 6px 6px 6px 0px;  
  12.                 padding: 0;  
  13.                 width: 0;  
  14.                 height: 0;  
  15.                 /* ie6 height fix */  
  16.                 font-size: 0;  
  17.                 line-height: 0;  
  18.                 /* ie6 transparent fix */  
  19.                 _border-top-color: #dddddd;  
  20.                 _border-bottom-color: #dddddd;  
  21.                 _filter: chroma( color = #dddddd);  
  22.             }  
  23.         </style>  
  24.     </head>  
  25.     <body>  
  26.     <div class="tipArrow"/>  
  27.     </div>  
  28. </body>  
  29. </html>  
 

知道有些同學要直接看效果的，哈哈：看

 

下載

三角形是出來了，那我們看一個應用的例子(結合了之前寫的fadeIn,fadeOut)：

 

http://kingkit.com.cn/KUI/Tip.html

 

完整打包

 

 

  • Triangle3.rar 

css實現三角形及應用樣本

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More