为了账号安全,请及时绑定邮箱和手机立即绑定

CSS绘制各种几何形状

标签:
CSS3

正方形

.square {
    width: 100px;
    height: 100px;
    background-color: green;
}
square.png

长方形

.rectangle {
    width: 200px;
    height: 100px;
    background-color: green;
}
rectangle.png

锐角三角形

.triangle-acute {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid green; 
}
triangle-acute.png

直角三角形

.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; 
}
triangle-right.png

平行四边形

.rhomboid {
    width: 200px;
    height: 100px;
    margin-left: 30px;
    background-color: green;
    transform: skewX(30deg)
}
rhomboid.png

梯形

.trapezoid {
    width: 100px;
    height: 0;
    border-bottom: 100px solid green;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
trapezoid.png

圆形

.circle {
    width: 100px;
    height: 100px;
    background-color: green;
    border-radius: 50%;
}
circle.png

其他图形后续不断更新中!

最后

  • 喜欢的记得点个star.鼓励一下,谢谢!
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
15
获赞与收藏
30

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消