尖角边框的实现方式有很多种

• 1.最简单粗暴的方法：背景图片。

可维护性不好。
但是可以是任意形状。

• 2.利用icon-font的◆文字图标。

大小颜色随意、方便维护。
但是形状固定。

• 3.利用边框特性。

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

其中font-size可以让元素的内容不显示，width 和 height只表示内容宽度。
实现的效果为：

当代码为

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

实现的效果为：

当代码为

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

实现的效果为：

其中border-width和transparent是关键。
border-color:transparent #333; 表示上下为透明色， 左右为#333颜色。 border-color: red yellow blue green;顺序是上右下左。