關(guān)于html-三角的制作

因?yàn)樽罱吹絼e人寫的不錯(cuò)的樣式，所以就想自己實(shí)現(xiàn)，但是呢用到了一個(gè)三角形，所以稍微研究一下。

效果是這樣的：

注意是下邊那個(gè)淺色三角，感覺書簽的效果有木有?？粗苡袑哟胃?。

接下來就是實(shí)現(xiàn)了，利用border這個(gè)屬性。

這里的話主要是 border-top、border-left、border-right、border-bottom 可以在css手冊(cè)中查到（http://css.doyoe.com/）

先拉個(gè)空白寫吧，我把幾個(gè)屬性都寫上。

code:

.triangle{
width:0;
height:0;
border-top:10px solid #000;
border-left:10px solid #000;
border-right:10px solid #000;
border-bottom:10px solid #000;
}

然后結(jié)果就是在屏幕上得到一個(gè)正方形的小黑塊。

接下來就是實(shí)現(xiàn)三角了，需要使用transparent這個(gè)參數(shù)，這個(gè)參數(shù)是使顏色透明。

code:

.triangle{
width:0;
height:0;

border-top:10px solid #000;
border-left:10px solid #000;
border-right:10px solid #000;
border-bottom:10px solid transparent;

}

效果：（有沒有書簽的感覺？這里可以更改top的值，加長(zhǎng)！）

那現(xiàn)在我們需要的就是給left也加上一個(gè)transparent就可以了，但是注意一點(diǎn)，這個(gè)時(shí)候top和right的修改影響這個(gè)三角的大小，比如我們?nèi)サ粢豁?xiàng)，可以看效果。

效果如上。這個(gè)時(shí)候與別人效果基本相似了，現(xiàn)在只需要把顏色切換就可以了。（#7195B7）

然后我們回到開始的那個(gè)demo,這樣效果呢，肯定要用到position定位了，然后把它定在下邊！考慮吧如果再寫個(gè)div標(biāo)簽的話

<div class="one">
    日志    
    <div class="triangle">
    </div>

</div>

效果的話有興趣的各位可以試試。

還有一種是利用::after；然后里邊寫定位

one::after{
    content: "";
    width:0;
    height:0;
    
    border-top:10px solid #000;
    border-left:10px solid #000;
    border-right:10px solid #000;
    border-bottom:10px solid transparent;

}

<div class="one">日志</div>

等我寫好了截圖放回來！