gpt4 book ai didi

html - 仅使用 CSS 的百分比饼图

转载 作者:搜寻专家 更新时间:2023-10-31 22:17:33 24 4
gpt4 key购买 nike

我找到了非常不错的“百分比饼图”,并且只想使用 CSS 来创建它。不需要动画。只是静态的“图片”。

Example 1

我明白如果我想创建这种图表我需要使用这些元素

Example 2

问题是

  1. 如何创建元素#2?
  2. 如何管理较小 (5%) 或较高百分比 (80%) 值的元素 #2 的形状?

最佳答案

新答案 2021

通过一些现代技术,我们可以改进代码。你可以有圆边,也可以考虑动画:

@property --p{
syntax: '<number>';
inherits: true;
initial-value: 1;
}

.pie {
--p:20; /* the percentage */
--b:22px; /* the thickness */
--c:darkred; /* the color */
--w:150px; /* the size*/

width:var(--w);
aspect-ratio:1/1;
position:relative;
display:inline-grid;
margin:5px;
place-content:center;
font-size:25px;
font-weight:bold;
font-family:sans-serif;
}
.pie:before,
.pie:after {
content:"";
position:absolute;
border-radius:50%;
}
.pie:before {
inset:0;
background:
radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
inset:calc(50% - var(--b)/2);
background:var(--c);
transform:rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}
.animate {
animation:p 1s .5s both;
}
.no-round:before {
background-size:0 0,auto;
}
.no-round:after {
content:none;
}
@keyframes p{
from{--p:0;}
}

body {
background:#ddd;
}
<div class="pie" style="--p:20"> 20%</div>
<div class="pie" style="--p:40;--c:darkblue;--b:10px"> 40%</div>
<div class="pie no-round" style="--p:60;--c:purple;--b:15px"> 60%</div>
<div class="pie animate" style="--p:80;--c:orange;"> 80%</div>
<div class="pie animate no-round" style="--p:90;--c:lightgreen"> 90%</div>

旧答案

您可以在多个背景下执行此操作。

0%50%:

.box {
width: 100px;
height: 100px;
display: inline-block;
border-radius: 50%;
padding: 5px;
background:
linear-gradient(#ccc, #ccc) content-box,
linear-gradient(var(--v), #f2f2f2 50%, transparent 0),
linear-gradient(to right, #f2f2f2 50%, blue 0);
}
<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%;
padding:5px;
background:
linear-gradient(#ccc,#ccc) content-box,
linear-gradient(var(--v), blue 50%,transparent 0),
linear-gradient(to right, #f2f2f2 50%,blue 0);
}
<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%;
padding:5px;
background:
linear-gradient(#ccc,#ccc) content-box,
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/calc(var(--s)*100%) ,
linear-gradient(var(--v), blue 50%,transparent 0) 0/calc((1 - var(--s))*100%),
linear-gradient(to right, #f2f2f2 50%,blue 0);
}
<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>

现在我们可以像下面这样优化以考虑百分比值:

.box {

--v:calc( ((18/5) * var(--p) - 90)*1deg);

width:100px;
height:100px;
display:inline-block;
border-radius:50%;
padding:10px;
background:
linear-gradient(#ccc,#ccc) content-box,
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(var(--v), transparent 50%,blue 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, #f2f2f2 50%,blue 0);
}
<div class="box" style="--p:5;"></div>
<div class="box" style="--p:20;"></div>
<div class="box" style="--p:50;"></div>
<div class="box" style="--p:60;"></div>
<div class="box" style="--p:75;"></div>
<div class="box" style="--p:100;"></div>

CSS pie chart

获取另一个版本的相关问题:Creating a static pie chart with CSS


我们还可以考虑使用mask来增加透明度:

.box {

--v:calc( ((18/5) * var(--p) - 90)*1deg);

width:100px;
height:100px;
display:inline-block;
border-radius:50%;
padding:10px;
background:
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(var(--v), transparent 50%,blue 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, #f2f2f2 50%,blue 0);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}

body {
background:linear-gradient(to right,red,yellow);
}
<div class="box" style="--p:5;"></div>
<div class="box" style="--p:20;"></div>
<div class="box" style="--p:50;"></div>
<div class="box" style="--p:60;"></div>
<div class="box" style="--p:75;"></div>
<div class="box" style="--p:100;"></div>

CSS pie chart with transparency

也喜欢下面:

.box {

--v:calc( ((18/5) * var(--p) - 90)*1deg);

width:100px;
height:100px;
display:inline-block;
border-radius:50%;
padding:10px;
background:
linear-gradient(var(--v), transparent 50%,blue 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, transparent 50%,blue 0);
-webkit-mask:
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}

body {
background:linear-gradient(to right,red,yellow);
}
<div class="box" style="--p:5;"></div>
<div class="box" style="--p:20;"></div>
<div class="box" style="--p:50;"></div>
<div class="box" style="--p:60;"></div>
<div class="box" style="--p:75;"></div>
<div class="box" style="--p:100;"></div>

transparent pie chart using CSS mask

相关:Border Gradient with Border Radius

关于html - 仅使用 CSS 的百分比饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52205399/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com