Как мне сделать круглый бордер, с длиной 50%, 70% и 90%

Question

На картинке есть 3 цифры с бордером, а на поверхности бордера есть еще один с цветом желтым, но не понимаю как сделать круглый бордер не с 100% длины.

Answer 1

Наложить два блока с полубордером, или псевдоэлементы. Так легко сделать дугу от 25% окружности, если меньше - подход менять придется.

.chart {
  line-height: 44px;
  width: 50px;
  height: 50px;
  text-align: center;
  position: relative;
  display: inline-block;
  border: 3px solid #ccc;
  box-sizing: border-box;
  border-radius: 50px;
}

.chart:before,
.chart:after {
  content: "";
  width: 25px;
  height: 50px;
  box-sizing: border-box;
  border-width: 3px 3px 3px 0;
  border-style: solid solid solid none;
  border-color: red;
  border-radius: 0 50px 50px 0;
  transform-origin: 0 25px;
  display: block;
  position: absolute;
  top: -3px;
  left: 22px;
}

.chart[percent="70"]:after {
  transform: rotate(72deg);
}

.chart[percent="90"]:after {
  transform: rotate(150deg);
}

<div class="chart" percent="50">2</div>
<div class="chart" percent="70">3</div>
<div class="chart" percent="90">4</div>

БЛОГ НА HUSL

Как мне сделать круглый бордер, с длиной 50%, 70% и 90%

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