New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css] 第76天 用CSS画出一个任意角度的扇形,可以写多种实现的方法 #527
Comments
四个半圆叠加,过半调整z-index: |
CSS代码先画一个圆,外加两个绝对定位的半圆 不知道描述的好不好理解,但确实能实现任意角度的扇形了 .contain {
position: relative;
width: 200px;
height: 200px;
}
.main {
height: 100%;
background: lightgreen;
border-radius: 100px;
}
.common {
position: absolute;
top: 0;
width: 50%;
height: 100%;
}
.mask1 {
transform: rotate(83deg);
border-radius: 100px 0 0 100px;
left: 0;
transform-origin: right center;
background: red;
}
.mask2 {
transform: rotate(-76deg);
transform-origin: left center;
left: 100px;
border-radius: 0 100px 100px 0;
background: blue;
} HTML代码 <div class="contain">
<div class="main"></div>
<div class="mask1 common"></div>
<div class="mask2 common"></div>
</div> 我也附个链接,直接改变两个mask样式里的度数即可 |
2楼的方法很赞 |
想到一个更加简单的方法,直接用 clip-path 切多边形,然后 border-radius 一裁剪就是扇形了! |
用两个矩形叠加遮罩最底层的圆 |
@liuxiaole 学到了学到了 |
这一题其实和 Day33 画三角形的很类似,利用 |
你这样可以画任意角度?300度的扇形怎么画? |
对于这种场景基本上就要用canvas了。 |
|
第76天 用CSS画出一个任意角度的扇形,可以写多种实现的方法
The text was updated successfully, but these errors were encountered: