Нужно сделать круглую линию внутри элемента

Question

Есть полукруг, нужно по правому краю сделать линию. Пробовал разные варианты, ничего не помогло. Сейчас код примерно следующий:

  .wheel-right
        padding-left: resize(140)
        display: flex
        justify-content: center
        align-items: center
        width: resize(325)
        height: resize(650)
        background: rgba(39,38,55,0.65)
        transform: rotate(360deg)
        border-radius: 0 100% 100% 0 / 0 50% 50% 0
        position: relative
        z-index: 1000

        &:hover
            background: rgba(19,18,31,0.75)

        &::after
            content: ''
            position: absolute
            width: resize(69)
            height: resize(650)
            background: #6666FF
            border-radius: 0 100% 100% 0 / 0 50% 50% 0

Answer 1

Можно так

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url(https://picsum.photos/1000/800) no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}

:root {
  --percent: 0.25;
  /* процент, насколько заполнен круг */
  --PI: 3.141592;
  --radius: 30;
  --total: calc( var(--PI) * var(--radius));
  --strokeDasharray: calc( var(--total) * var(--percent)) calc( var(--total) * (1 - var(--percent)) * 2);
}

.circle {
  max-width: 160px;
  display: block;
}

.progressbar__track {
  fill: transparent;
  stroke: #6666ff;
  width: 50px;
  height: 50px;
  stroke-width: 2px;
  stroke-dasharray: var(--strokeDasharray);
  transform-origin: center;
}

.progressbar__thumb {
  stroke-width: 2px;
  fill: black;
  stroke: black;
  opacity: 0.5;
}

.pre_circle {
  fill: black;
}

.circle2 .progressbar__track {
  transform-origin: 0% 50%;
}

<svg class="circle" viewbox="0 0 64 64">
      <circle class="progressbar__thumb" cx="50%" cy="50%" r="30"></circle>
      <circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
      <circle class="pre_circle" cx="50%" cy="50%" r="15"></circle>
</svg>

<svg class="circle circle2" viewbox="0 0 64 64">
      <circle class="progressbar__thumb" cx="0" cy="50%" r="30"></circle>
      <circle class="progressbar__track" cx="0" cy="50%" r="30"></circle>
      <circle class="pre_circle" cx="0" cy="50%" r="15"></circle>
</svg>

Answer 2

.box {
  width: 160px;
  height: 160px;
  background-color: #000;
  border-radius: 50%;
}

.box__container {
  width: 150px;
  height: 150px;
  border: 5px solid red;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
}

<div class="box">
  <div class="box__container"></div>
</div>

БЛОГ НА HUSL

Нужно сделать круглую линию внутри элемента

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