html - 我正在用 HTML 和 CSS 制作一个圆环图，需要帮助将我的跨度放在楔子的中间

Question

几乎我正在制作半个甜甜圈图。在互联网上找到了一些代码，但它并没有真正按照我想要的方式进行。它使用<ul>和<li>和边框，还使用动画来填充图表。

我试过给它一个margin-left，是的，它在de chart里面，但是把它放在中间真的很难。

.chart {
  position: relative;
  width: 50rem;
  height: 25rem;
  overflow: hidden;
}

.chart::before,
.chart::after {
  position: absolute;
}

.chart::before {
  content: '';
  width: inherit;
  height: inherit;
  border: 5rem solid rgba(211, 211, 211, .3);
  border-bottom: none;
  border-top-left-radius: 25rem;
  border-top-right-radius: 25rem;
}

.chart::after {
  content: '';
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: bold;
  color: cadetblue;
}

.chart li {
  position: absolute;
  top: 100%;
  left: 0;
  width: inherit;
  height: inherit;
  border: 5rem solid;
  border-top: none;
  border-bottom-left-radius: 25rem;
  border-bottom-right-radius: 25rem;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation-fill-mode: forwards;
  animation-duration: .4s;
  animation-timing-function: linear;
}

.chart li:nth-child(1) {
    z-index: 11;
    border-color: rgb(197, 8, 8);
    animation-name: rotate-one;
}

.chart li:nth-child(2) {
    z-index: 10;
    border-color: rgb(11, 139, 245);
    animation-name: rotate-two;
    animation-delay: .4s;
}

.chart li:nth-child(3) {
    z-index: 9;
    border-color: rgb(216, 116, 23);
    animation-name: rotate-three;
    animation-delay: .8s;
}

.chart li:nth-child(4) {
    z-index: 8;
    border-color: rgb(92, 197, 89);
    animation-name: rotate-four;
    animation-delay: 1.2s;
}

/* ..... here is the span or text i want centered */

.chart li span {
    position: relative;
    display: block;
    float: left;
    font-size: 1.85rem;
    backface-visibility: hidden;
    /**/
    color: rgb(5, 5, 5);
    font-weight: 600;
    font-family: sans-serif;
    margin-left: -2.25em;
    text-align: center;
}

.chart li:nth-child(1) span {
    transform: rotate(-59.65714285714286deg);
}

.chart li:nth-child(2) span {
    transform: rotate(-98.22857142857143deg);
    animation-delay: .4s;      
}

.......... this is the animations that the wedges/borders do

@keyframes rotate-one {
  100% {
    transform: rotate(59.65714285714286deg);
    /**
     * 12% => 21.6deg
     */
  }
}

@keyframes rotate-two {
  0% {
    transform: rotate(59.65714285714286deg);
  }

  100% {
    transform: rotate(98.22857142857143deg);
    /**
     * 32% => 57.6deg 
     * 57.6 + 21.6 => 79.2deg
     */
  }
}

<ul class="chart">
    <li>
        <span>116</span>
    </li>
    <li>
        <span>75</span>
    </li>
    <li>
        <span>47</span>
    </li>
    <li>
        <span>44</span>
    </li>
    <li>
        <span>38</span>
    </li>
    <li>
        <span></span>
    </li>
    <li>
        <span></span>
    </li>
    <li>
        <span></span>
    </li>
    <li>
        <span></span>
    </li>
    <li>
        <span></span>
    </li>
    <li>
        <span></span>
    </li>
<ul>

在此处输入图像描述

标签： htmlcsscss-animations