1 回答

TA貢獻1816條經驗 獲得超6個贊
使用帶有徑向漸變的蒙版來創建一個孔
:root {
--size: 80px;
--bord: 10px;
}
.chart {
width: var(--size);
height: var(--size);
margin: 1em auto;
border-radius: 50%;
background: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));
mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));
}
.x-60 {
--value: 60%;
}
.x-20 {
--value: 20%;
}
body {
background:linear-gradient(to right,yellow,blue);
}
<div class="chart x-60">
</div>
- 1 回答
- 0 關注
- 129 瀏覽
添加回答
舉報