如何用css创建这样的图形？答案

【问题标题】：How to create graph like this with css?如何用css创建这样的图形？
【发布时间】：2020-04-21 00:12:05
【问题描述】：

.donut-chart-block {
    overflow: hidden;
}

.donut-chart {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 2rem auto;
    border-radius: 100%
}

.donut-chart .center {
    background: #00ced1;
    position: absolute;
    top: 30px;
    left: 30px;
    height: 140px;
    width: 140px;
    border-radius: 70px;
}

.clip {
    border-radius: 50%;
    clip: rect(0px, 200px, 200px, 100px);
    height: 100%;
    position: absolute;
    width: 100%;
}

.item {
    border-radius: 50%;
    clip: rect(0px, 100px, 200px, 0px);
    height: 100%;
    position: absolute;
    width: 100%;
    font-family: monospace;
    font-size: 1.5rem;
}

#section1 {
    transform: rotate(0deg);
    height: 200px;
}

#section1 .item {
    background-color: #2b9a9e;
    transform: rotate(90deg);

}

#section2 {
    transform: rotate(90deg);
}

#section2 .item {
    background-color: black;
    transform: rotate(50deg);
}

#section3 {
    transform: rotate(140deg);
}

#section3 .item {
    background-color: gray;
    transform: rotate(60deg);
}

#section4 {
    transform: rotate(180deg);
}

<div class="container">
  <div class="donut-chart-block block">
    <div class="donut-chart">
      <div id="section1" class="clip">
        <div class="item" data-rel="21"></div>
      </div>
      <div id="section2" class="clip">
        <div class="item" data-rel="39"></div>
      </div>
      <div id="section3" class="clip">
        <div class="item" data-rel="31"></div>
      </div>
      <div id="section4" class="clip">
        <div class="item" data-rel="9"></div>
      </div>
      <div class="center"></div>
    </div>
  </div>
</div>

请帮我用 css 创建这个形状。

我从 stackoverflow 获得了循环代码。我已经创建了圆圈，但我无法更改特定部分的大小。

这是在html中使用css的代码。如何自定义图表。通过在 html 中使用 css 来使图形部分特定的大小发生变化，但不能自定义图形。如何自定义它。可以在css中自定义吗？

【问题讨论】：

我用过 transform: rotate();但它不工作
请编辑问题并添加您的代码。这样我们就可以了解您的代码出了什么问题。 stackoverflow.com/help/minimal-reproducible-example
你可以从这个stackoverflow.com/a/36624395/4990572得到帮助
@KuldipKoradia 你是对的。他应该推荐help center
嘿，我很忙。所以我无法回复你，抱歉。现在我添加了一些代码，请检查谢谢。@RiteshKhandekar

标签： javascript html css bootstrap-4

【解决方案1】：

您可以按照this answer 中的说明使用纯 css 绘制圆形扇区。但使用 SVG 可能更容易。

body{
  background: darkturquoise;
}

.circle-sector {
  overflow: hidden;
  width: 100px;
  height: 50px;
  transform-origin: 50% 100%;
  position: absolute; 
}

.circle {
  margin-top: 
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  background: white;
  transform-origin: 50% 100%;
  transform: rotate(60deg);
}

.center {
  width: 50px;
  height: 50px;
  margin-left: 25px;
  background: darkturquoise;
  border-radius: 50%;
  margin-top: 25px;
  transform: rotate(0deg);
  position: absolute;
}

.another-circle {
  width: 80px;
  margin-left: 10px;
  height: 40px;
  margin-top: 10px;
  
  border-radius: 40px 40px 0 0;
  background: black;
  transform-origin: 50% 100%;
  transform: rotate(140deg);
}

<div class="circle-sector" style="transform: rotate(0deg);">
  <div class="circle"></div>
</div>

<div class="circle-sector" style="transform: rotate(-120deg);">
  <div class="another-circle"></div>
</div>

<div class="center"></div>

circle-class（或other-circle）将绘制一个半圆。它被放置在circle-sector 内部，它将隐藏内部所有超出其矩形形状的东西。所以要得到一个圆形扇区，我们只需要围绕“整个”圆的中心旋转内半圆。最后，要得到中心的孔，只需在上面放置一个背景颜色的圆圈。因为transform: rotate 的使用使其他形状变成了 3D-ish，为了获得上方的中心，我们需要应用一些变换，例如旋转 0 度。

【讨论】：

我已经用你创建了完整的圆圈，但我需要增加圆圈的大小。
只需增加所有 css 类中的宽度、高度、边框半径和边距即可缩放 everything 。如果要增加单个扇区的半径，则必须增加该扇区的大小，但还要为所有其他扇区增加边距，如我的回答所示。这样您就可以确保您的部门仍然具有相同的中心。
我试过了，但是它改变了所有形状的条，所以我不明白如何处理它

【解决方案2】：

我了解您想要制作一个图表并为每个图表元素创建一个形状（具有动态值）。我认为用纯 css 几乎不可能做到这一点。我建议使用像http://recharts.org/en-US/examples/TwoLevelPieChart这样的库

【讨论】：