border屬性的多方位應用和實現自適應三角形

border屬性是在實際的應用中使用頻率比較高的一個屬性，除了做爲邊框使用，利用border屬性的一些特徵以及表現方式，能夠在實現一些比較常見的效果（如等高佈局，上下固定內容滾動佈局和繪製CSS圖標等），利用css3新增的屬性值（如使用圖片填充邊框）能夠實現一些更復雜的效果。

本文不介紹border的屬性的基本應用方法，將直接介紹如何經過border屬性實現一些常見的效果。

利用border畫三角形和梯形等多邊形

在CSS中，常見的平面圖形爲矩形以及圓形。可是不免有些情景須要咱們利用CSS去繪製三角形、梯形和平行四邊形等。此時咱們能夠利用border在渲染時的一些表現特色來實現這些功能。如下講解如何一步一步獲得三角形。
首先咱們寫一個div，樣式以下

.border {
     width: 200px;   
     height: 100px;   
     margin: 0 auto;   
     border-top: 40px solid red;   
     border-bottom: 40px solid green;   
     border-left: 40px solid yellow;   
     border-right: 40px solid blue;   
 }複製代碼

瀏覽器渲染後效果以下：

咱們發現，經過給div的四個邊框設置不一樣的顏色，其渲染後的表現形式爲四個梯形組成的邊框。
若是咱們把高度定義爲0，那麼渲染後以下：

若是咱們再把寬度設置爲0，結果以下：

到此爲止，經過對比以上定義的不一樣的樣式，咱們發現，在CSS中，邊框的表現實際上以梯形的形式來渲染的（這可能與groove等3D效果的屬性值有關，具體沒去深刻研究）。當元素的寬高爲0時就會變成擠在一塊兒的四個三角形。所以，咱們能夠想到，若是把其中的三個邊框的顏色定義爲透明色transparent,而後經過包裹在一個外層容器上，並給外層容器設置overflow:hidden，那麼咱們將獲得一個等腰梯形或者三角形。如今咱們把css修改以下：

.trapezoid {
     width: 200px;   
     height: 0;      
     border-top: none;   
     border-bottom: 60px solid #249ff1;   
     border-left: 40px solid transparent;   
     border-right: 40px solid transparen;   
 }複製代碼

咱們將獲得如下梯形：

將樣式設置爲以下：

.triangle {
     width: 0;
     height: 0;
     border-top: 0 solid transparent;
     border-bottom: 100px solid #249ff1;
     border-left: 100px solid transparent;
     border-right: 100px solid transparent;
 }複製代碼

咱們將獲得如下三角形：

因爲全部的二維多邊形能夠劃分爲多個三角形組成，加上border這種表現形式的基礎，咱們能夠經過設置不一樣邊框寬度值、顏色以及借住僞元素或者多個元素的拼接能夠實現更爲複雜的一些圖形，理論上咱們能夠用CSS繪製任何的多邊形。好比多角星，菱形，以及咱們常見的聊天氣泡等。以下爲其中幾個例子

利用border實現左右兩欄等高佈局

在實際上項目中，我常常會有左右兩欄佈局的需求，好比後臺管理的左側菜單欄區域和右側的內容區域以及相似京東分類導航的佈局，以下圖。

實現這種佈局有不少解決方案，好比利用padding和margin相互抵消的方法便可實現。可是若是利用border來實現的話，可能可使CSS更加簡潔，適用性和兼容性也會更高。好比針對第一張圖的效果，咱們有以下html結構。

<div class="menu">
    <ul>
        <li>首頁</li>
        <li>商品管理</li>
        <li>營銷中心</li>
        <li>會員管理</li>
        <li>系統設置</li>
    </ul>
</div>
<div class="content">這裏是內容區域</div>複製代碼

以及如下主要的CSS：

.menu {
    float: left;
    width: 200px;
    color:  #FFF;
}
.content {
    border-left:  200px solid #40403b;/*這裏是主要的樣式*/
    padding: 20px;
    height: 1000px; /* 這裏表明內容區域 */
}複製代碼

因爲border寬度不支持百分比值，因此這種實現方法的缺點是難以直接作到左右兩側寬度按比例自適應。

利用border實現移動端上下固定佈局

在移動端上的應用，頁面的頭部和底部固定，中間內容區域滾動是常見的佈局，以下圖。

實現這種佈局一樣是有多種實現方法，通常是利用上下fixed定位（fixed定位在移動端會有呼起鍵盤錯位和結合transform使用時的bug，這個另外寫文章分析），再借助margin,padding來實現。可是若是利用border來實現不只代碼簡潔，兼容性也高。其核心的樣式爲在內容區域增長透明的上下邊框，上邊框的寬度等於頭部高度，下邊框的寬度等於腳步高度。以下：

header,footer {
    position: fixed;
    width: 100%;
    line-height: 50px;
    color: #FFF;
    background: #249ff1;
    text-align: center;
}
header {
    top: 0;
    left: 0;
}
footer {
    bottom: 0;
    left: 0;
}
.container {
    padding: 20px;
    background: #f3f3f3;
    height: 1000px; /*這裏表明內容*/
    border-top: 50px solid transparent;/*上邊框寬度等於header高度*/
    border-bottom: 50px solid transparent;/*下邊框寬度等於footer高度*/
}複製代碼

利用這種方法，咱們一樣也能夠實現背景的定位，好比爲圖片添加水印時水印的右下角和左上角等定位。

border-color使用技巧

因爲在border不指定顏色時其顏色值等於標籤的字體顏色值，咱們能夠利用此特色作一些效果。好比：具備邊框的a標籤，正常狀態下邊框和字體顏色爲灰色，鼠標通過時爲藍色，以下：

通常狀況下，咱們會用僞元素來寫裏面的加號，當鼠標通過時要同時改變邊框色值，字體色值和僞元素的背景色值，可是利用這屬性，咱們只須要改變a標籤的字體色值。代碼以下。

a {
    position: relative;
    display: inline-block;
    padding: 30px 20px;
    color: #a7a7a7;
    border: 1px solid;
}
a:hover {
    color: #249ff1;
}
a:before,a:after {
    content: '';
    display: block;
}
a:after {
    border-top: 2px solid;
    width: 20px;
}
a:before {
    position: absolute;
    top:  20px;
    left:  29px;
    border-left: 2px solid;
    height: 20px;
}複製代碼

實現一個自適應三角形

有時候咱們會有作自適應三角形效果的需求，好比下圖。這是一個註冊頁面，設計需求爲：在註冊頁面頂部的兩個身份的選擇爲兩個灰色背景的矩形，寬度自適應。當選中其中一個身份時變爲藍色背景的五邊形。

實現這個需求能夠用SVG或者CSS3的clip-path 屬性來實現，但假如咱們要藉助border來實現，該怎麼作呢？

咱們對UI元素進行拆分，有多種拆分方法很天然的是把激活狀態下的形狀拆分爲頂部的矩形和底部的等腰三角形。這樣能夠藉助僞元素以及邊框畫三角形的方法進行CSS樣式的定義。但問題來了，由於兩個標籤的寬度是自適應的，那麼邊框寬度的值也須要自適應，然而邊框的寬度值是不支持百分比的。？？怎麼辦？這時咱們第一個想到的方法天然會是用js動態計算，可是不是不借助js動態計算就沒有辦法了呢？咱們能夠畫個圖進行分析。

假設分割後的三角形造成的矩形區域爲父級元素（圖中藍色部分），實際的三角形爲相對於該元素定位的子元素或者僞元素（這裏選用僞元素，圖中的紅藍交叉部分），那麼咱們的標籤只須要一個div。
當咱們要讓三角形隨着矩形自適應，其理想狀態應該爲圖中紅色和藍色交叉部分(上邊框+透明的左右邊框實現的三角形)。由border-width不支持百分比值，咱們姑且先給邊框寬度一個足夠大的值，經過定位後，就成了圖中紅色三角形的部分。溢出的部分，咱們在父級進行overflow:hidden便可，這樣一個自適應的三角形就實現了。剩下的就是如何去定位和如何設置這個值。
咱們假設父級的寬度爲a,高度爲b,三角形的border-top爲y，border-left和border-right爲x。在未進行定位以前，A點應該與B點重合，經過定位後，A點與B點相對位置爲(-(x-0.5a） , -(y-b)）。此時咱們又遇到一個問題，就是x和y爲一個固定的大值，a和b爲一個百分比值，那麼CSS就要進行計算才能定位，用CSS3的calc屬性能夠解決，可是可能會有兼容性問題。咱們經過思考，換個角度，若是可以讓A點相對於C和D的中點定位，那相對位置就變爲(-x,-y)，問題就好辦了。咱們把圖片作一下改變，以下圖：

若是咱們把父級的高度設置爲0,利用padding-top來撐開高度，把寬度設置爲0.5a，利用padding-left來撐開另外的0.5a，那麼A點就相對於P點定位（P點此時爲內容區域的左上角）了。此時，A相對於P的位置爲(-x,-y)。至此，經過如下樣式便可實現一個響應式三角形。(注意border-left和border-top的比例，根據類似三角形特徵計算便可)

<div></div>複製代碼

div {
    width: 40%;
    padding-top: 8%;
    padding-left: 40%;/*寬高比爲10:1*/
    overflow: hidden;
    border: 1px solid red;/*爲方便觀察顯示*/
}
div:after {
    content:  '';
    display: block;
    width: 0;
    height: 0;
    border-left: 1500px solid transparent;/*足夠大的邊框寬度*/
    border-right: 1500px solid transparent;/*足夠大的邊框寬度*/
    border-top: 300px solid #249ff1;/*寬高比爲10:1，即（1500+1500）: 300*/
    /*定位（-x,-y）*/
    margin-top: -300px;
    margin-left: -1500px;
}複製代碼

效果以下：

有了這個方法，就能夠實現上面的註冊頁Tab標籤的設計。同時經過調整各個參數，同樣能夠實現各類類型的三角形。設要定義的等腰三角形底爲2x,高爲y，父級須要的寬爲2a,高爲b。那麼各個值知足的關係以下：

border-left = border-right = x = -margin-left;
 border-top / padding-top = x / a;
 margin-top = -border-top;
 至於border-left的取值則根據實際須要設置一個大值便可，
 而border-top與三角形的形狀有關，即與a和b比例有關複製代碼

以上爲border屬性的一些特色和實際應用，後期將會繼續更新更多的特色和使用場景。暫且先寫這些。