css绘制多种多变形
主要思想是:四边组成一个矩形,通过改变每条边的形状来绘制多边形
- border-位置:宽度 ,样式 ,颜色
- 通过控制div的长宽,以及边的宽度和颜色来控制
- 带入门,发挥想象就靠您了
当div有宽高时
中间撑开的为空白为div的形状
border-top: 100px solid ;
border-bottom: 100px solid ;
border-right: 100px solid #5bc0de;
border-left: 100px solid #5bc0de;
transform: translate(-50%, -50%);
- 当有的边框为透明时
border-top: 100px solid transparent;
border-bottom: 100px solid #5bc0de;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
- 当div的宽高为0时
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-bottom: 100px solid #5bc0de;
border-right: 100px solid transparent;
border-left: 100px solid transparent;