尖角边框的实现方式有很多种
- 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;顺序是上右下左。
