Github地址:https://github.com/Jasonccj/css-learning/tree/master/everydayCss/polygon
掘金地址:https://juejin.im/post/5c68375d5188252a160efdec
慕课地址:https://www.imooc.com/article/278712
.square {
width: 100px;
height: 100px;
background-color: green;
}
长方形
.rectangle {
width: 200px;
height: 100px;
background-color: green;
}
锐角三角形
.triangle-acute {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
}
直角三角形
.triangle-right {
width: 0;
height: 0;
border-left: 50px solid green;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid green;
}
平行四边形
.rhomboid {
width: 200px;
height: 100px;
margin-left: 30px;
background-color: green;
transform: skewX(30deg)
}
梯形
.trapezoid {
width: 100px;
height: 0;
border-bottom: 100px solid green;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
圆形
.circle {
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
其他图形后续不断更新中!
最后- 喜欢的记得点个star.鼓励一下,谢谢!
