HTML（下面的效果图实现HTML的代码均一样）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="wrapper"></div>
</body>
</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;
}
效果图
梯形图实现
网友评论