尖角邊框的實(shí)現(xiàn)方式有很多種

• 1.最簡單粗暴的方法：背景圖片。

可維護(hù)性不好。
但是可以是任意形狀。

• 2.利用icon-font的◆文字圖標(biāo)。

大小顏色隨意、方便維護(hù)。
但是形狀固定。

• 3.利用邊框特性。

    height: 0;
    width: 0;
    font-size: 0;
    border-style: solid;
    border-width: 50px 50px 50px 0;
    border-color: green red;

其中font-size可以讓元素的內(nèi)容不顯示，width 和 height只表示內(nèi)容寬度。
實(shí)現(xiàn)的效果為：

當(dāng)代碼為

    height: 0;
    width: 0;
    font-size: 0;
    border-style: solid;
    border-width: 50px 50px 50px 50px;
    border-color: green red;

實(shí)現(xiàn)的效果為：

當(dāng)代碼為

    width: 0;
    height: 0;
    font-size: 0;
    border-width: 50px 50px 50px 50px;
    border-style: solid;
    border-color: transparent #333;

實(shí)現(xiàn)的效果為：

其中border-width和transparent是關(guān)鍵。
border-color:transparent #333; 表示上下為透明色， 左右為#333顏色。 border-color: red yellow blue green;順序是上右下左。