CSS实现扇形圆形的一种思路

第一步 CSS画圆

思路：先实现正方形，通过设置四个圆角来实现圆形，圆角大小为正方形边长的1/2

1 <div class="circle"></div>
2 <style>
3   .circle {
4       width: 200px;
5       height: 200px;
6       border-radius: 100px;
7       background-color: #f00;
8   }
9 </style>

第二步 CSS画半圆

思路：

1. 通过设置两个圆角来实现半圆先画整圆

2.通过clip设置可见区域为1/2

 1 <div class="semi"></div>
 2 <div class="semi-clip"></div>
 3 <style>
 4   .semi {
 5       width: 200px;
 6       height: 100px;
 7       border-radius: 100px 100px 0 0;
 8       background-color: #f00;
 9   }
10   .semi-clip {
11       position: absolute;
12       width: 200px;
13       height: 200px;
14       border-radius: 100px;
15       background-color: #f00;
16       clip: rect(0 200px 200px 100px);
17   }
18 </style>

第三步 CSS实现90度扇形

思路：

1. 通过设置一个圆角来实现90度扇形

2.通过设置正方形的一个border来实现90度扇形

 1 <div class="quarter"></div>
 2 <div class="quarter-border"></div>
 3 <style>
 4   .quarter {
 5       width: 100px;
 6       height: 100px;
 7       border-radius: 100px 0 0;
 8       background-color: #f00;
 9   }
10   .quarter-border {
11       width: 200px;
12       height: 200px;
13       border: 100px solid #fff;
14       border-right-color: #f00;
15       box-sizing: border-box;
16       border-radius: 100px;
17   }
18 </style>

第四步 CSS实现任意角度扇形

小于180度扇形

思路一：整圆红底，两个白底半圆各自盖住整圆的一半，通过旋转其中一个半圆实现任意角度

 1 <div class="circle">
 2   <div class="semi semi1"></div>
 3   <div class="semi semi2"></div>
 4 </div>
 5 <style>
 6     .circle {
 7         width: 200px;
 8         height: 200px;
 9         border-radius: 100px;
10         background-color: #f00;
11         position: relative;
12     }
13     .semi {
14         background-color: #fff;
15         position: absolute;
16         width: 200px;
17         height: 200px;
18     }
19     .semi1 {
20         clip: rect(0 200px 200px 100px);
21         transform: rotate(65deg);
22     }
23     .semi2 {
24         clip: rect(0 100px 200px 0);
25     }
26 </style>

思路2：整圆白底，两个半圆(红底、白底各一个)重叠，红底在下，白底在上，通过旋转白底半圆实现任意角度

 1 <div class="circle">
 2   <div class="semi semi1"></div>
 3   <div class="semi semi2"></div>
 4 </div>
 5 <style>
 6     .circle {
 7         width: 200px;
 8         height: 200px;
 9         border-radius: 100px;
10         background-color: #fff;
11         position: relative;
12     }
13     .semi {
14         background-color: #f00;
15         position: absolute;
16         width: 200px;
17         height: 200px;
18         clip: rect(0 200px 200px 100px);
19     }
20     .semi2 {
21         background-color: #fff;
22         transform: rotate(65deg);
23     }
24 </style>

思路3：先画白底半圆，内部嵌套红底半圆，但是内部半圆在不可见区域，通过逐步旋转红底半圆到可见区域来实现任意角度

 1 <div class="circle">
 2     <div class="semi semi1">
 3         <div class="inner"></div>
 4     </div>
 5 </div>
 6 <style>
 7     .circle {
 8         width: 200px;
 9         height: 200px;
10         border-radius: 100px;
11         position: relative;
12     }
13     .semi {
14         position: absolute;
15         width: 200px;
16         height: 200px;
17         border-radius: 100px;
18         background-color: #fff;
19         clip: rect(0 200px 200px 100px);
20     }
21     .semi .inner {
22         position: absolute;
23         width: 200px;
24         height: 200px;
25         border-radius: 100px;
26         background-color: #f00;
27         clip: rect(0 100px 200px 0);
28     }
29     .semi1 .inner {
30         transform: rotate(65deg);
31     }
32 </style>

大于180度扇形思路：半圆+小于180度扇形

 1 <div class="circle">
 2   <div class="semi semi1"></div>
 3   <div class="semi semi2"></div>
 4 </div>
 5 <style>
 6     .circle {
 7         width: 200px;
 8         height: 200px;
 9         border-radius: 100px;
10         background-color: #fff;
11         position: relative;
12     }
13     .semi {
14         position: absolute;
15         width: 200px;
16         height: 200px;
17         background-color: #f00;
18         clip: rect(0 200px 200px 100px);
19     }
20     .semi2 {
21         transform: rotate(60deg)
22     }
23 </style>

第五步完整圆形动画

思路：第四步中的每种实现方式，小于180度和大于180度不会同时存在。而要实现完整圆形动画，可以使用两个小于180度的扇形叠加，其中一个到达180度(动画结束)后另一个开始。

 1 <div class="circle">
 2     <div class="semi semi1">
 3         <div class="inner"></div>
 4     </div>
 5     <div class="semi semi2">
 6         <div class="inner"></div>
 7     </div>
 8 </div>
 9 <style>
10     .circle {
11         width: 200px;
12         height: 200px;
13         border-radius: 100px;
14         position: relative;
15     }
16     .semi {
17         position: absolute;
18         width: 200px;
19         height: 200px;
20         border-radius: 100px;
21         background-color: #fff;
22         clip: rect(0 200px 200px 100px);
23     }
24     .semi .inner {
25         position: absolute;
26         width: 200px;
27         height: 200px;
28         border-radius: 100px;
29         background-color: #f00;
30         clip: rect(0 100px 200px 0);
31     }
32   
33     .semi2 {
34         clip: rect(0 100px 200px 0);
35     }
36     .semi2 .inner {
37         clip: rect(0 200px 200px 100px);
38     }
39     @keyframes sector {
40         from {
41             transform: rotate(0deg)
42         }
43         to {
44             transform: rotate(180deg)
45         }
46     }
47     .semi1 .inner {
48         animation: sector 1s linear 0s forwards;
49     }
50     .semi2 .inner {
51         animation: sector 1s linear 1s forwards;
52     }
53 </style>

这只是其中的一帧效果图。

第六步圆环

思路：在第五步的基础上，增加实心白底圆

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>CSS Fan Animation</title>
 5     <style>
 6         .circle {
 7             width: 200px;
 8             height: 200px;
 9             border-radius: 100px;
10             position: relative;
11         }
12 
13         .semi {
14             position: absolute;
15             width: 200px;
16             height: 200px;
17             border-radius: 100px;
18             background-color: #fff;
19             clip: rect(0 200px 200px 100px);
20         }
21 
22             .semi .inner {
23                 position: absolute;
24                 width: 200px;
25                 height: 200px;
26                 border-radius: 100px;
27                 background-color: #f00;
28                 clip: rect(0 100px 200px 0);
29             }
30 
31         .semi2 {
32             clip: rect(0 100px 200px 0);
33         }
34 
35             .semi2 .inner {
36                 clip: rect(0 200px 200px 100px);
37             }
38 
39         @keyframes sector {
40             from {
41                 transform: rotate(0deg)
42             }
43 
44             to {
45                 transform: rotate(180deg)
46             }
47         }
48 
49         .semi1 .inner {
50             animation: sector 1s linear 0s forwards;
51         }
52 
53         .semi2 .inner {
54             animation: sector 1s linear 1s forwards;
55         }
56 
57         .round {
58             position: absolute;
59             top: 10px;
60             left: 10px;
61             width: 180px;
62             height: 180px;
63             border-radius: 50%;
64             background-color: #fff;
65         }
66     </style>
67 </head>
68 <body>
69 
70     <div class="circle">
71         <div class="semi semi1">
72             <div class="inner"></div>
73         </div>
74         <div class="semi semi2">
75             <div class="inner"></div>
76         </div>
77         <div class="round">
78 
79         </div>
80     </div>
81 </body>
82 </html>
83 <!--
84     思路：
85        <=180度扇形  先画白底半圆，内部嵌套红底半圆rect实现，但是内部半圆在不可见区域rect实现，通过逐步旋转红底半圆到可见区域来实现任意角度
86        >180度扇形 半圆+小于180度扇形
87        增加实心白底圆 class="round"
88 -->

这只是其中的一帧效果图。

来源：https://mp.weixin.qq.com/s?__biz=MzI4MzA5NTI0NA==&mid=2247483687&idx=1&sn=3fc23f90416e88f3578f024621eeed58&chksm=eb8eb884dcf93192dc4bec3cdfcc6aabd687cf79033e567d076d3d4166e1754d5e0a18f578fd&scene=27

posted on 2025-07-24 09:50 华安阅读(41) 评论(0) 收藏举报

刷新页面返回顶部

huaan011