使用CSS border-radius 实现一个半圆,居然没几个人写得出来!?

使用CSS border-radius 实现一个半圆,居然没几个人写得出来!?


阅读全文
请先 登录 后评论
  • 0 关注
  • 0 收藏 79 浏览
  • 略问用户 提出于 2020-10-22 17:35:04

17 个回答

xxxxxa
这是我的一个解决方法。[PS:并非最佳实践]
请先 登录 后评论
xxxxxa
2个div嵌套,父元素设置宽高,overflow:hidden;子元素设置成圆完事
请先 登录 后评论
xxxxxa
1、 border-left: 100px solid red; border-radius: 100px 0 0 100px; height: 200px; width: 100px; 2、 height: 200px; width: 100px; background: red; border-radius: 100px 0 0 100px;
请先 登录 后评论
xxxxxa
width: 50px;height:100px;border-radius:50px 0 0 50px;
请先 登录 后评论
xxxxxa
width: 100px; height: 200px; border-radius: 200% 0 0 200%/ 100% 0 0 100%;
请先 登录 后评论
xxxxxa
我居然写了两个div , 拼在一块??
div{ width: 100px; height: 100px; background-color: red; border-top-left-radius: 100px; } .div2{ border-top-left-radius: 0; border-bottom-left-radius: 100px; }
请先 登录 后评论
xxxxxa
width: 100px; height: 200px; background: #2e6da4; border-top-left-radius: 100px; border-bottom-left-radius: 100px; 我一下子就写出来了。。。本来确实没写过。
请先 登录 后评论
xxxxxa
大佬有没有考虑再写本css世界外传
请先 登录 后评论
xxxxxa
``` css .box{ display: inline-block; border-width: 50px; border-style: solid; border-color: red transparent transparent red; border-radius: 50%; transform: rotate(-45deg); } ```
请先 登录 后评论
xxxxxa
```css div { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(45deg, #f00 0, #f00 50%, #fff 50%, #fff 100%); transform: rotate(45deg); } ``` 偷懶了,不加厚線條,直接用漸層解決。也沒說要用在哪裡,沒差吧
请先 登录 后评论