设置css的border-color属性得到三角形或梯形

HTML（下面的效果图实现HTML的代码均一样）

1、CSS（中间有width，有height）

 #wrapper{
 width:100px;
 height:100px;
 border-width: 100px;
 border-style: solid;
 border-color: blue black red yellow;
}

效果图

中间有width，有height

2、CSS（中间有width，无height）

#wrapper{
width:100px;
height:0;
border-width: 100px;
border-style: solid;
border-color: blue black red yellow;
}

效果图

中间有width，有无height

3、CSS（中间无width，有height）

#wrapper{
width:0;
height:100px;
border-width: 100px;
border-style: solid;
border-color: blue black red yellow;
}

效果图

中间无width，有height

4、CSS（中间无width，无height）

#wrapper{
width:0;
height:0;
border-width: 100px; 
border-style: solid;
border-color: blue black red yellow;
}

效果图

中间无width，无height

1、border-width:100px;设置元素边框上下左右宽度都是100px
2、border-color： blue black red yellow;设置元素四个边框的颜色
3、transparent : 颜色指定为透明的

利用上述出现情况和3个特点，那么我们就可以实现利用border-color属性获得不同角度的三角形和梯形。

5、CSS（中间无width，无height，三个边框颜色是transparent）

#wrapper{
width:0;
height:0px;
border-width: 100px;
border-style: solid;
border-color: transparent black   transparent transparent;
}

效果图

三角形实现

6、CSS（中间y有width，有height，三个边框颜色是transparent）

#wrapper{
width:100px;
height:100px;
border-width: 100px;
border-style: solid;
border-color:transparent transparent red transparent;
}

效果图

梯形图实现