如何用css畫出三角形

時間 2020-02-23

標籤如何 css 畫出三角形欄目 CSS 简体版

原文原文鏈接

在平時的開發中咱們常常要使用到小三角，咱們除了使用切出來的圖案，還有其餘方式來實現這個小三角嗎？答案是確定的，只要經過border這個css屬性就能夠簡單實現啦。css

下面讓咱們一步步來看下是如何實現的。html

首先咱們來看以下代碼瀏覽器

<style type="text/css">
    .triangle_test{
        width:50px;
        height: 50px;
        border-width: 15px;
        border-color: red green black blue;
        border-style: solid;
}
    .triangle_test1{
        width:100px;
        height:100px;
        border-width: 15px;
        border-color: red green black blue;
        border-style: solid;
}
</style>
<body>
    <div class="triangle_test"></div>
    <p>
        <span class="triangle_test1"></span>
        <s class="triangle_test1"></s>
    </p>
</body>

顯示結果：app

可是若是咱們把width 和heigth設置成爲0那又變成啥了？ide

看圖可知，對於行內元素width和heigth並不起效果的，因此在triangle_test1中咱們須要使用到spa

font-size:0這個css屬性來設置行內元素的高度..net

.triangle_test1{
        width:0;
        height:0;
        border-width: 15px;
        border-color: red green black blue;
        border-style: solid;
        font-size:0;
}

到這一步咱們就應該知道三角形該怎麼實現了吧。3d

有人說那我只設置border-top的屬性，只讓踏一個顯示不就行了麼？真的是這樣嗎？orm

然而事實是這樣並不能實現。這裏經過一個小例子來解釋htm

1.1 設置相鄰邊框可見

.triangle_1{
    width:100px;
    height: 100px;
    border-width:20px;/* 20px 0 0;*/
    border-style: solid;
    border-color: red green blue black;
}

顯示出來是這樣子的，紅色邊框顯示爲梯形

.triangle_1{
    width:100px;
    height: 100px;
    border-width:20px 20px 0 0;/*這裏有修改*/
    border-style: solid;
    border-color: red green blue black;
}

看到了嗎，紅色並非顯示爲梯形，黑色不顯示的話，他會把部分成色區域覆蓋，規律一看就知。

因此使另外三邊變爲透明便可實現小三角。

2.設置邊框顏色透明度

.triangle2{/*兼容各個瀏覽器*/
    width: 0;
    height: 0;
    border-width: 10px;
    border-style:solid; /*dashed dashed dashed/*
    border-color: red transparent transparent transparent;

    font-size:0;
}

可是這個就會致使不能兼容ie6如下的瀏覽器，由於不識別transparent屬性。

因此這裏用到了一個ie6如下瀏覽器的特色就是border-style:dashed這個屬性

能夠參考文章 http://it.chinawin.net/application/article-180df.html

因此最終的結果爲

.triangle2{ /*兼容各個瀏覽器*/
    width: 0;
    height: 0;
    border-width: 10px;
    border-style:solid dashed dashed dashed;
    border-color: red transparent transparent transparent;
    font-size:0;
}

--------------------------------------------------------------------------------

以上只有上下左右三角的畫法，接下來咱們簡單說下左上角三角的畫法

這裏就能夠用到上述文中1.1中的樣式

.triangle_1{
    width:0;//將width和heigth設置爲0
    height: 0;
    border-width:20px 20px 0 0;
    border-style: solid;
    border-color: red green blue black;
}

這樣咱們只要設置border-style:solid dashed dashed dashed;

border-color:red transparent transparent transparent;便可獲得紅色的左上箭頭