您可以在 github 仓库中找到这篇文章中的所有代码。
您可以在此处查看 codesandbox 的视觉效果。
通过css绘制各种形状
如何在 css 中绘制正方形、梯形、三角形、异形三角形、扇形、圆形、半圆、固定宽高比、0.5px 线？
shapes 0.5px line
.square { width: 100px; height: 100px; border-top: 50px solid red; border-bottom: 50px solid blue; border-right: 50px solid green; border-left: 50px solid orange;}.trapezoidal { width: 100px; height: 100px; border: 50px solid transparent; border-bottom-color: tomato;}.triangle { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: tomato;}.sector { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: tomato; border-radius: 50%;}.circle { width: 100px; height: 100px; border-radius: 50%; background-color: tomato;}.half-circle { width: 100px; height: 50px; background-color: tomato; border-top-left-radius: 50px; border-top-right-radius: 50px;}.fixed-width-height-ratio { padding-top: 56.25%; background-color: blue; width: 100%;}.half-one-px-line { background-color: aqua; border-bottom: 1px solid black; transform: scaleY(0.5) scaleX(0.5); transform-origin: 0 0;}
以上就是形状 – CSS 挑战的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1631951.html
微信扫一扫 
支付宝扫一扫 
