Как определить начало круговой диаграммы не по часовой стрелке?

Question

Подскажите пожалуйста как начать круговую диаграмму не по часовой стрелке, а наоборот слева-направо?

.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>

Answer 1

Немного оптимизировал код - изменений минимум, можно копировать и вставлять. Добавил два CSS-правила для селектора data-атрибута 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>

БЛОГ НА HUSL

Как определить начало круговой диаграммы не по часовой стрелке?

Ответы (1 шт):