簡單實用的css邊框屬性border

本文主要講述利用border屬性作出不一樣的幾何形狀從而適用於比較好看的視覺樣式。

預備知識

border相關屬性

• border-width 邊框的寬度
• border-style 邊框的樣式
• border-color 邊框的顏色

案例舉例

爲了更加通俗易懂，demo用的是最簡單的dom元素和css屬性

<div class="border">
    <div class="border-left">商品介紹</div>
    <div class="border-icon"></div>
    <div class="border-right">商品評價</div>
</div>

.border{
    margin: 50px auto;
    width: 540px;
    font-size:18px;
    line-height: 40px;
    text-align: center;
}
.border-left{
    width: 260px;
    height: 40px;
    background: #f3941d;
    float: left;
    color: #fff;
}
.border-icon{
    width: 0px;
    height: 0;
    border-width: 40 20 0 0;
    border-style: solid;
    border-color: #f3941d #f5d7b7 #f3941d #f3941d;
    float: left;
}
.border-right{
    width: 260px;
    height: 40px;
    float: right;
    background: #f5d7b7;
    color: #aaa;
}

上面的css代碼重點在於左邊較深顏色與右邊較淺顏色中間有一個三角形.border-icon

<div class="content">
    <div class="border">
        <div class="small-triangle"></div>
        <div class="text">介紹</div>
        <div class="big-triangle"></div>
    </div>
</div>

.content{
    margin: 60px auto;
    width: 540px;
    height: auto;
    position: relative;
    border-top: 1px solid #ddd;
}
.border{
    position: absolute;
    margin-top: -15px;
    margin-left: 20px;
}
.text{
    background: #e14340;
    height: 70px;
    width: 60px;
    line-height: 80px;
    color: #fff;
    text-align: center;
}
.small-triangle{
    position: absolute;
    width: 0;
    height: 0;
    border-width: 15px 10px 0px 0px;
    border-style: solid;
    border-color: #fff #c33a37 #ccc #ddd;
    margin-left: -10px;
}
.big-triangle{
    width: 0;
    height: 0;
    border-width: 8px 30px;
    border-style: solid;
    border-color: #e14340 #e14340 #fff #e14340;
}

上面的css代碼重點在於左邊較深顏色的小三角.small-triangle和底部的三角.big-triangle

原理解析

那麼border屬性是如何變化出不一樣的幾何形狀呢？

.border1{
    width:0; 
    height:0; 
    border-width:20px 20px 20px 20px; 
    border-style:solid; 
    border-color:#aaa #bbb #ccc #ddd;
}

看看上述樣式產生的是一個什麼樣子的內容

咱們經過border-width border-color能夠任意變化每一條變的寬高，和顏色。
任意組合就能組成不一樣的由三角形組成的其它幾何形狀了。

更多內容可關注微信公衆號：有一個姑娘在coding 好好學習，快樂編碼