Border gradient с прозрачным окончанием

Question

Есть вложенные в друг друга 4 блока у которых бордер-радиус 50%, соответственно они круги. Между 2м и 3м нужно создать что-то вроде спидометра, т.е. начинается градиент и заканчивает в прозрачный цвет например на уровни 6-7. Как я это пытаюсь сделать. Пример внизу.

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  border-radius: 50%;
  display: flex;
}

.first-circle {
  height: 400px;
  width: 400px;
  border: 2px solid gray;
}

.second-circle {
  height: 350px;
  width: 350px;
  border: 2px solid gray;
  background: -webkit-linear-gradient(yellow, white);
}

.third-circle {
  height: 300px;
  width: 300px;
  border: 2px solid gray;
  background: black;
}

.forth-circle {
  height: 250px;
  width: 250px;
  border: 2px solid gray;
}

<div style="background-color: aqua;" clss="flex-center">
  <div class="first-circle circle flex-center">
    <div class="second-circle circle flex-center">
      <div class="third-circle circle flex-center">
        <div class="forth-circle circle flex-center">
        </div>
      </div>
    </div>
  </div>
</div>

И тут проблемы, ну во-первых я должен оставить прозрачность всех кругов, т.е. решить проблему тем что б закрасить два круга и в итоге будет разница в цвете в градиенте не канает так как етсь фоновый рисунок.

Пошел следующим путем, что как мне более реален. Просто задать широкий бордер 3-му кругу, а у второго убрать, соответственно нужно для 3го круга создать бордер-градиент с трансперент. Пример ниже

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  border-radius: 50%;
  display: flex;
}

.first-circle {
  height: 400px;
  width: 400px;
  border: 2px solid gray;
}

.second-circle {
  height: 350px;
  width: 350px;
}

.third-circle {
  height: 300px;
  width: 300px;
  border: 29px solid gray;
}

.forth-circle {
  height: 250px;
  width: 250px;
  border: 2px solid gray;
}

<div style="background-color: aqua;" clss="flex-center">
  <div class="first-circle circle flex-center">
    <div class="second-circle circle flex-center">
      <div class="third-circle circle flex-center">
        <div class="forth-circle circle flex-center">
        </div>
      </div>
    </div>
  </div>
</div>

Каким образом отрисовать так, что б (по часовой стрелке) 3 5-7 часов было прозрачно и с 7 часов через весь круг например до 3 часов заполнить градиентом который от 3-х часов уходит в трансперент?

БЛОГ НА HUSL

Border gradient с прозрачным окончанием

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