我已經找到了非常不錯的“百分比餅圖”，并且只想用CSS創建它。不需要動畫。只是靜態的“圖片”。我了解如果我想創建此類圖表，則需要使用類似以下的元素問題是如何創建元素＃2？如何為較?。?％）或較高百分比（80％）的值管理元素＃2的形狀？
2 回答
梵蒂岡之花
TA貢獻1900條經驗 獲得超5個贊
您可以在多個背景下執行此操作。
從0%到50%：
.box {
width: 100px;
height: 100px;
display: inline-block;
border-radius: 50%;
border: 5px solid transparent;
background:
linear-gradient(#ccc, #ccc) padding-box,
linear-gradient(var(--v), #f2f2f2 50%, transparent 0) border-box,
linear-gradient(to right, #f2f2f2 50%, blue 0) border-box;
}
<div class="box" style="--v:-90deg"></div><!-- 0% -->
<div class="box" style="--v:-45deg"></div><!-- 12.5% -->
<div class="box" style="--v: 0deg"></div><!-- 25% -->
<div class="box" style="--v: 45deg"></div><!-- 37.5% -->
<div class="box" style="--v: 90deg"></div><!-- 50% -->
<p>The formula is [p = (18/5) * x - 90]. <small>Where x is the percentage and p the degree</small></p>
<p>for x = 5% --> p = -72deg </p>
<div class="box" style="--v:-72deg"></div>
從50%到100%：
.box {
width:100px;
height:100px;
display:inline-block;
border-radius:50%;
border:5px solid transparent;
background:
linear-gradient(#ccc,#ccc) padding-box,
linear-gradient(var(--v), blue 50%,transparent 0) border-box,
linear-gradient(to right, #f2f2f2 50%,blue 0) border-box;
}
<div class="box" style="--v:-90deg"></div><!-- 50% -->
<div class="box" style="--v:-45deg"></div><!-- 62.5% -->
<div class="box" style="--v: 0deg"></div><!-- 75% -->
<div class="box" style="--v: 45deg"></div><!-- 87.5% -->
<div class="box" style="--v: 90deg"></div><!-- 100% -->
<p>The formula is [p = (18/5) * x - 270]. <small>Where x is the percentage and p the degree</small></p>
<p>for x = 80% --> p = 18deg </p>
<div class="box" style="--v:18deg"></div>
您可以像這樣組合兩者：
.box {
width:100px;
height:100px;
display:inline-block;
border-radius:50%;
border:5px solid transparent;
background:
linear-gradient(#ccc,#ccc) padding-box,
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) center/calc(var(--s)*100%) border-box,
linear-gradient(var(--v), blue 50%,transparent 0) center/calc(100% - var(--s)*100%) border-box,
linear-gradient(to right, #f2f2f2 50%,blue 0) border-box;
}
<div class="box" style="--v:-90deg;--s:1"></div>
<div class="box" style="--v:0deg;--s:1"></div>
<div class="box" style="--v:90deg;--s:1"></div>
<div class="box" style="--v:0deg;--s:0"></div>
<div class="box" style="--v:90deg;--s:0"></div>
HUWWW
TA貢獻1874條經驗 獲得超12個贊
使用新的圓錐體漸變，可以使用一個div來進行管理，該div剛剛作為實驗屬性進入Chrome瀏覽器。
:root {
--size: 100px;
--bord: 10px;
}
.chart {
width: var(--size);
height: var(--size);
margin: 1em auto;
border-radius: 50%;
background-image: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.chart::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% - var(--bord));
height: calc(100% - var(--bord));
background: white;
border-radius: inherit;
}
p {
position: relative;
z-index: 1;
font-size: 2em;
}
.x-60 {
--value: 60%;
}
.x-20 {
--value: 20%;
}
<div class="chart x-60">
<p>60%</p>
</div>
<div class="chart x-20">
<p>20%</p>
</div>
多虧了Temani Afif，可以在沒有使用邊框和偽造元素的偽元素的情況下實現此目標background-clip。
background:
linear-gradient(white,white) padding-box,
conic-gradient(lightseagreen var(--value), lightgrey var(--value)) border-box;
:root {
--size: 100px;
--bord: 10px;
}
.chart {
width: var(--size);
height: var(--size);
margin: 1em auto;
border: var(--bord) solid transparent;
border-radius: 50%;
background: linear-gradient(white, white) padding-box, conic-gradient(lightseagreen var(--value), lightgrey var(--value)) border-box;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.x-60 {
--value: 60%;
}
.x-20 {
--value: 20%;
}
<div class="chart x-60">
<p>60%</p>
</div>
<div class="chart x-20">
<p>20%</p>
</div>
- 2 回答
- 0 關注
- 582 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消