html怎么设置梯形背景颜色,设置css的border-color属性得到三角形或梯形

HTML(下面的效果图实现HTML的代码均一样)

JS Bin

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;

}

效果图

梯形图实现