主页 / 问题 / 1517876
Accepted
powerg
Asked:2023-05-05 22:45:06 +0000 UTC2023-05-05 22:45:06 +0000 UTC

如何判断饼图的开始不是顺时针的？

  • 772

请告诉我如何不是顺时针开始绘制饼图，而是从左到右相反？

.diagram-inner {
  --percentage: 40;
  --border-thickness: 4px;
  --main-color: #27b510;
  --w: 40px;

  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: math.div(28, 20);
  text-align: center;
  letter-spacing: -0.01em;
  font-family: $fontFamilyManrope;
}

.diagram-inner:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(farthest-side, var(--main-color) 98%, #0000)
      top/var(--border-thickness) var(--border-thickness) no-repeat,
    conic-gradient(var(--main-color) calc(var(--percentage) * 2%), #edf0f3 0);
  -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--border-thickness)),
    #000 calc(100% - var(--border-thickness))
  );
  mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--border-thickness)),
    #000 calc(100% - var(--border-thickness))
  );
}

.diagram-inner:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: calc(50% - var(--border-thickness) / 2);
  background: var(--main-color);
  transform: rotate(calc(var(--percentage) * 7.2deg))
    translateY(calc(50% - var(--w) / 2));
}
<div style="--percentage:40;--border-thickness:4px" class="diagram-inner">4</div>

css

1 个回答

  1. Best Answer

    稍微优化了代码 - 最少的更改，您可以复制和粘贴。为数据属性选择器添加了两条 CSS 规则data-ccw：现在，标签中此属性的存在将决定填充方向。为了清晰起见，添加了交互性。

    .diagram-inner {
  /* --percentage: 40; закомментировал только для примера, чтобы не писать лишний код для ползунка */
  --border-thickness: 4px;
  --main-color: #27b510;
  --w: 40px;
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: math.div(28, 20);
  text-align: center;
  letter-spacing: -0.01em;
  font-family: $fontFamilyManrope;
}

.diagram-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border-radius: 50%;
  background: radial-gradient(farthest-side, var(--main-color) 98%, #0000) top/var(--border-thickness) var(--border-thickness) no-repeat, conic-gradient(var(--main-color) calc(var(--percentage, 0) * 1%), #edf0f3 0);
  --mask-image: radial-gradient( farthest-side, #0000 calc(99% - var(--border-thickness)), #000 calc(100% - var(--border-thickness)));
  -webkit-mask: var(--mask-image);
  mask: var(--mask-image);
}
.diagram-inner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  inset: calc(50% - var(--border-thickness) / 2);
  background: var(--main-color);
  transform: rotate(calc(var(--percentage, 0) * 3.6deg)) translateY(calc(50% - var(--w) / 2));
}

.diagram-inner[data-ccw]::before {
  background: radial-gradient(farthest-side, var(--main-color) 98%, #0000) top/var(--border-thickness) var(--border-thickness) no-repeat, conic-gradient( #edf0f3 calc(100% - var(--percentage, 0) * 1%), var(--main-color) calc(100% - var(--percentage, 0) * 1%));
}
.diagram-inner[data-ccw]::after {
  transform: rotate(calc(var(--percentage, 0) * -3.6deg)) translateY(calc(50% - var(--w) / 2));
}
    <input type="range" value="0" oninput="document.body.style.setProperty('--percentage', this.value, 'important')">
<!-- --percentage:40; убрал только для примера, чтобы не писать лишний код для ползунка -->
<div style="--border-thickness:4px" class="diagram-inner">4</div>
<div style="--border-thickness:4px" data-ccw class="diagram-inner">4</div>

    • 1

相关问题