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.鼓励一下,谢谢!
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/201/viewspace-2821333/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
nginx fastcgi(17)
请登录后发表评论
登录
全部评论
