CSS border實現三角形

時間 2019-11-12

標籤 css border 實現三角形欄目 CSS 简体版

原文原文鏈接

1、原理

CSS盒模型瀏覽器

一個盒子包括：margin+border+padding+content。上下左右邊框交界處出呈現平滑的斜線。利用這個特色，經過設置不一樣的上下左右邊框寬度或者顏色能夠獲得小三角，小梯形等。調整寬度大小能夠調節三角形形狀。字體

示例1：
通常狀況下，咱們設置盒子的寬高度及上下左右邊框，會呈現以下圖：spa

    #test1 {
              height: 20px;
              width: 20px;
              border-color: #FF9600 #3366ff #12ad2a #f0eb7a;
              border-style: solid;
              border-width: 20px;
      }

示例2：
在上面基礎上，咱們把寬高度都設爲0時，會呈現上述的邊界斜線：code

       #test2 {
               height: 0;
               width: 0;
               overflow: hidden; /* 這裏設置overflow, font-size, line-height */
               font-size: 0;     /*是由於, 雖然寬高度爲0, 但在IE6下會具備默認的 */
               line-height: 0;  /* 字體大小和行高, 致使盒子呈現被撐開的長矩形 */
               border-color: #FF9600 #3366ff #12ad2a #f0eb7a;
               border-style: solid;
               border-width: 20px;
        }

這時，其實咱們已經看到有上下左右四個三角形了。若是4種顏色只保留一種顏色，餘下3種顏色設置爲透明（或者設置爲和背景色相同的顏色），那不就出現一個小三角了嗎？對象

示例3：
只保留上面的紅色，以下圖：blog

        #test3 {
             height: 0;
             width: 0;
             overflow: hidden;
             font-size: 0;
             line-height: 0;
             border-color: #FF9600 transparent transparent transparent;
             border-style: solid;
             border-width: 20px;  
       }

但是，IE6下不支持透明啊，會出現下圖的樣子：圖片

找到一個在IE6下邊框透明的文章中找到解決辦法，以下例產品

示例4：
IE6下，設置餘下三條邊的border-style爲dashed，便可達到透明的效果，具體緣由能夠見參考資料3：class

    #test4 {
               height: 0;
               width: 0;
               overflow: hidden;
               font-size: 0;
               line-height: 0;
               border-color: #FF9600 transparent transparent transparent;
               border-style: solid dashed dashed dashed;
               border-width: 20px;  
        }

示例5：
上面咱們畫的小三角的斜邊都是依靠原來盒子的邊，還有另一種形式的小三角，就是斜邊在盒子的對角線上：test

        #test5 {
               height: 0;
               width: 0;
               overflow: hidden;
               font-size: 0;
               line-height: 0;
               border-color: #FF9600 #3366ff transparent transparent;
               border-style: solid solid dashed dashed;
               border-width: 40px 40px 0 0 ;
        }

保留其中一種顏色，就能夠獲得斜邊在對角線上的三角形了。多個這樣的三角形，經過設置邊框大小、顏色，拼湊起來能夠造成任意形狀的三角形

像這種不規則的三角形，延伸一下，放在氣泡框上，就能夠省去拼背景圖片的麻煩了：

另外，關於氣泡框，能夠使用棱形字符(◆)來實現，設置其font-size，顏色和背景色一致，定位能夠使用margin負值和absolute絕對定位來實現。2、應用之圓角生成

應該說是近似圓角，其實由一個高度很是小的梯形展現出來。上梯形（無上邊框，下左右3px寬度，左右顏色去掉）＋矩形＋下梯形。

自適應圓角1

整個rc設置爲「float: left」或「display: inline-block」分爲top、bd、bottom，top中又有兩個層rc1和rc2，rc1只設置border-top，高度爲0，並設置左右margin呈短小的一橫線，rc2只設置左右border而且左右margin小於rc1，height爲1px，中間bd設置左右border，不設置左右margin。 – 不過IE6&7出現bug：rc在IE6中依然顯示爲「dispaly: block」，而IE7中top和 bottom縮成一坨，不願擴展開來，而在rc1/rc2/rc3中插入文字xxx後只能擴展到文字寬度，不能與bd對齊。

自適應圓角2

自Google系產品的1px圓角按鈕，共三層div，最外層div1正常設置邊框寬度1px，呈現出上下邊框線，中間div2只設置左右邊框，且把左右margin設置成負值，呈現出圓角處的4個圓點，內層div3一樣只設置左右邊框，同時margin上下空出div2的高度，margin左右也設置與div2相同的負值。

3、其餘小問題

透明

IE6瀏覽器不支持transparent透明屬性，就border生成三角技術而言，直接設置對應的透明邊框的border-style屬性爲 dotted或是dashed便可解決這一問題，緣由是在IE6下，點線與虛線均以邊框寬度爲基準，點線長度必須是其寬度的3倍以上 (height>=border-width*3)，虛線寬長度必須是其寬度的5倍以上(height>=border-width*5)，不然點線和虛線都不會出現。