8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. 仅使用 CSS 的百分比饼图

仅使用 CSS 的百分比饼图

gregoiregentil 2月前
32 0

我找到了非常漂亮的“百分比饼图”，并希望仅使用 CSS 创建它。无需动画。只需静态“图片”。我明白如果我想创建这种图表，我需要使用元素...

我找到了非常漂亮的“百分比饼图”，并想仅使用 CSS 创建它。无需动画。只需静态“图片”。

Example 1

我明白如果我想创建这种图表，我需要使用类似这样的元素

Example 2

问题是

  1. 如何创建元素#2？
  2. 如何管理元素＃2 的形状以获得较小（5％）或较高百分比（80％）的值？
帖子版权声明 1、本帖标题：仅使用 CSS 的百分比饼图
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由gregoiregentil在本站《css》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 5楼

    使用新的 圆锥渐变 ，可以通过一个刚刚作为实验属性登陆 Chrome 的 div 来进行管理。

    结果图片

    enter image description here 

    :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>
返回
作者最近主题：