如何仅使用 CSS 在圆形图上正确定位圆形末端边框？

Question

我正在尝试仅使用 CSS 和 HTML 创建一个圆形图，其中每个部分都有一个在开始和结束处都有圆形末端的边框。但是，我正在努力定位

::before

和

::after

伪元素以正确标记每个段边框的开始和结束。

这是我目前正在处理的内容：

• 我使用

  conic-gradient

  根据百分比填充圆圈 (

  --value

  )。
• 我想在每个段的边框的开始 (

  ::before

  ) 和结束 (

  ::after

  ) 处添加小圆形边框（12px 直径）。

我使用 calc() 以及

cos()

和

sin()

来尝试根据圆圈填充的百分比 (

::after

) 计算

--value

伪元素的位置。但是，它似乎无法正常工作。

如何将 ::after 伪元素准确定位在圆形图上填充段的末尾，并确保其与填充圆弧的边缘对齐？

谢谢您的帮助！

这是我的 CSS 的简化版本：

.circular {
        &__graph {
        grid-area: b;
        max-width: 100%;
        width: 100%;
        margin-top: 36px;
        justify-content: center;
        display: flex;
        flex-direction: column;
        padding-left: 65px;

        &-chart{
            display: flex;
            width: 100%;
            height: 500px;
            } 
    }

    &__circles{
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
    }

&__dial-circle {
        --size: 320px;
        --thickness: 12px;
        width: var(--size);
        height: var(--size);
        border-radius: 60%;
        background: conic-gradient(var(--color, #1e90ff) calc(var(--value)* 1%), #F9F9F9 0);
        mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), white calc(100% - var(--thickness) + 1px));
        position: absolute;
        //transform: rotate(180deg);


        &::before, &::after {
            content: ' ';
            width: 12px;
            height: 12px;
            position: absolute;
            background: var(--color, #1e90ff);
            left: calc(50% - 7px);
            top: 0;
            border-radius: 50%;
        }

        &::after{
            border: 1px solid red;
            --angle: calc(var(--value) * 3.6);
            --radius: calc((var(--size) / 2) - var(--thickness));

            left: calc(50% + var(--radius) * cos(var(--angle) * (pi / 180)) - 6px);
            top: calc(50% + var(--radius) * sin(var(--angle) * (pi / 180)) - 6px);

        }
    }
}

这是我的示例 HTML：

<div class="circular__graph-chart">
    <div class="circular__circles">
        <div class="circular__dial-circle" style="--color: rgb(39, 63, 82);--value: 79.5;--size: 314px;"></div>
        <div class="circular__dial-circle" style="--color: rgb(36, 91, 120);--value: 72.8;--size: 282px"></div>
        <div class="circular__dial-circle" style="--color: rgb(105, 129, 142);--value: 86;--size: 250px"></div>
        <div class="circular__dial-circle" style="--color: rgb(189, 200, 201);--value: 68.2;--size: 217px"></div>
        <div class="circular__dial-circle" style="--color: rgb(231, 195, 184);--value: 79.1;--size: 185px"></div>
        <div class="circular__dial-circle" style="--color: rgb(195, 175, 180);--value: 86.8;--size: 152px"></div>
    </div>
</div>

这是一个实例：https://codepen.io/JonJonCS/pen/BaXopEE

我尝试使用

cos()

中的

sin()

和

calc()

函数将

::after

元素定位在填充段的末尾。我期望

::after

元素恰好出现在填充弧的边缘，但相反，它的位置不正确并且未与线段的边缘对齐。我希望红色圆圈能够标记边界的确切末端。

Answer 1

坦白说。仅仅使用 CSS 和 HTML 对此功能不够强大。

使用 SVG 并利用

pathLength

和

stroke-linecap: round

svg {
  height: 80vh;
  margin: 10vh auto;
  border: 1px solid red;
  display: block;
  transform: rotate(-90deg);
}

svg circle {
  stroke-width: 5;
  fill: transparent;
}

#outer {
  stroke: lightgrey;
  animation: value 5s linear infinite;
  stroke-linecap: round
}

#inner {
  stroke: blue;
  stroke-width: 10;
  animation: value 5s linear infinite;
  stroke-linecap: round;
}

@keyframes value {
  0% {
    stroke-dasharray: 0 100;
  }
  100% {
    stroke-dasharray: 100 100;
  }
}

<svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle id="outer" cx="60" cy="60" r="50" pathLength="100" />

  <circle id="inner" pathLength="100" cx="60" cy="60" r="30" />
</svg>