[分享]css3扇形图百分比

CSS3扇形图是一种非常有趣的图形展示方式，它可以帮助我们将数据以一种精美的方式展现出来。在这里，我们将分享如何使用CSS3创建扇形图，并且在图形中显示百分比。 .piewrapper { borde...

CSS3扇形图是一种非常有趣的图形展示方式，它可以帮助我们将数据以一种精美的方式展现出来。在这里，我们将分享如何使用CSS3创建扇形图，并且在图形中显示百分比。

 .pie-wrapper {
    border-radius: 50%;
    height: 200px;
    position: relative;
    width: 200px;
  }
  .pie {
    border-radius: 50%;
    clip: rect(0, 200px, 200px, 100px);
    height: 200px;
    position: absolute;
    width: 200px;
  }
  .left-side-half-circle {
    background-color: #F67E7E;
    border-radius: 100% 0 0 100%;
    height: 200px;
    position: absolute;
    right: 50%;
    top: 0;
    width: 100px;
  }
  .right-side-half-circle {
    background-color: #F9C774;
    border-radius: 0 100% 100% 0;
    height: 200px;
    position: absolute;
    top: 0;
    width: 100px;
  }
  .percent {
    font-size: 30px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  } 

在上面的代码中，我们使用了CSS3的border-radius属性来创造圆形的容器，然后使用绝对定位（position: absolute）来添加半圆形。我们使用clip属性来隐藏容器中不需要的部分，然后添加百分比文本（position: absolute）来实现扇形图百分比的显示。

对于半圆形，我们在CSS3中使用了border-radius属性来控制它的形状，使得它看起来更像扇形。我们还使用了不同的颜色来区分不同的值，可以根据需要自行更改。

最后，我们在HTML中创建一个包含扇形图的容器，并将每个值的百分比添加到它的HTML标记中。

 <div class="pie-wrapper">
    <div class="pie left-side-half-circle"></div>
    <div class="pie right-side-half-circle">
      <p class="percent">50%</p>
    </div>
    <p class="percent">50%</p>
  </div> 

以上就是使用CSS3创建扇形图百分比的所有内容，希望对你有所帮助。如有任何疑问欢迎随时联系我们。谢谢！