8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

仅使用 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)
  • 使用新的 圆锥渐变 ,可以通过一个刚刚作为实验属性登陆 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>
返回
作者最近主题: