四個半圓疊加，過半調整 z-index
.container
div
.fan-1,
.fan-3
.fan-2,
.fan-4
.fan-1,
.fan-2
.fan-3,
.fan-4
.fan-4
.fan-2
.fan-3
@keyframes zindex
50%
50.000001%
to }
@keyframes rotate-1
50%
to }
@keyframes rotate-2
50%
to }
clip-path 切多邊形， border-radius 裁剪
1 .sector
@keyframes sector
25%
25.000001%
50%50.000001%
75%75.000001%to}
靜態：先畫乙個圓，外加兩個絕對定位的半圓
扇形可以通過兩個半圓作為遮罩旋轉來露出相應的角度實現
這只能切出180°以內的扇形
超過180°的扇形，就把圓作為底色，兩個遮罩作為扇形的組成部分
想獲得不同度數的扇形，改變 mask 樣式裡的度數即可。
與歌謠一起通關前端面試題
css3 繪製畫圓 扇形
css已經越來越強大了 可以使用它來繪製各種簡單的形狀，用於代替顯示，這次的分享主要用到畫圓，扇形 實現圓形 效果如下 border radius圓角的四個值按順序取值分別為 左上 右上 右下 左下。這裡只設定乙個值，代表四個角的取值都為為50 原理 border radius 50 彎曲元素的邊框...
CSS 畫乙個心
效果圖 實現原理 可以把這個心分為兩部分，兩個長方形，分別設定 border radius，transform rotate 設定屬性之後 再次新增乙個，設定相反的 rotate 設定其中乙個的 left 值 就成了 為了看起來有立體感，可以設定左邊的 box shadow cssbodydivdi...
CSS 畫乙個心
效果圖 實現原理 可以把這個心分為兩部分，兩個長方形，分別設定 border radius，transform rotate 設定屬性之後 再次新增乙個，設定相反的 rotate 設定其中乙個的 left 值 就成了 為了看起來有立體感，可以設定左邊的 box shadow cssbodydivdi...