Полукруг с бордером и градиентом

Question

Столкнулся с проблемой как сделать как сделать с помощью border-radius или другими способами то что изображено на картинке, цвет должен быть градиент

Просмотрел весь интернет похожего много но ответа так и не нашол

Макет | Figma

Answer 1

По макету у Вас этот элемент повторяется несколько раз, отличается только поворотом вокруг своей оси.
Так же градиент вряд ли будет меняться, по этому самый лучший и простой способ - сохранить этот элемент как картинку (лучше SVG) и вращать её через transform: rotate как это требует макет

<svg xmlns="http://www.w3.org/2000/svg" width="91" height="91" fill="none" viewBox="0 0 91 91" style="transform: rotate(45deg)"> <!-- вращать через transform rotate -->
  <path fill="url(#a)" fill-rule="evenodd" d="M45.198 14.34c-17.076 0-30.92 13.535-30.92 30.232H.009C.008 20.169 20.24.387 45.198.387c24.957 0 45.19 19.782 45.189 44.185h-14.27c0-16.697-13.843-30.232-30.92-30.232Z" clip-rule="evenodd"/>
  <defs>
    <linearGradient id="a" x1="10.971" x2="89.497" y1=".387" y2="13.818" gradientUnits="userSpaceOnUse">
      <stop stop-color="#DF5950"/>
      <stop offset="1" stop-color="#451046"/>
    </linearGradient>
  </defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="91" height="91" fill="none" viewBox="0 0 91 91">
  <path fill="url(#a)" fill-rule="evenodd" d="M45.198 14.34c-17.076 0-30.92 13.535-30.92 30.232H.009C.008 20.169 20.24.387 45.198.387c24.957 0 45.19 19.782 45.189 44.185h-14.27c0-16.697-13.843-30.232-30.92-30.232Z" clip-rule="evenodd"/>
  <defs>
    <linearGradient id="a" x1="10.971" x2="89.497" y1=".387" y2="13.818" gradientUnits="userSpaceOnUse">
      <stop stop-color="#DF5950"/>
      <stop offset="1" stop-color="#451046"/>
    </linearGradient>
  </defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="91" height="91" fill="none" viewBox="0 0 91 91" style="transform: rotate(180deg)"> <!-- вращать через transform rotate -->
  <path fill="url(#a)" fill-rule="evenodd" d="M45.198 14.34c-17.076 0-30.92 13.535-30.92 30.232H.009C.008 20.169 20.24.387 45.198.387c24.957 0 45.19 19.782 45.189 44.185h-14.27c0-16.697-13.843-30.232-30.92-30.232Z" clip-rule="evenodd"/>
  <defs>
    <linearGradient id="a" x1="10.971" x2="89.497" y1=".387" y2="13.818" gradientUnits="userSpaceOnUse">
      <stop stop-color="#DF5950"/>
      <stop offset="1" stop-color="#451046"/>
    </linearGradient>
  </defs>
</svg>

Answer 2

Вариант на CSS (с анимацией, в качестве примера):

.loader {
  font-size: 16px; /* Масштаб элемента */
  height: 7.5em; width: 7.5em;
  background-image: linear-gradient(to right, #df5950, #451046);
  -webkit-mask: 0em -3.75em / 100% 100% radial-gradient(circle at center bottom, #fff0 2.4375em, #ffff 2.5em 3.6875em, #fff0 3.75em);
  mask: 0em -3.75em / 100% 100% radial-gradient(circle at center bottom, #fff0 2.4375em, #ffff 2.5em 3.6875em, #fff0 3.75em);
  /* transform: rotate(45deg); Угол поворота для статичного элемента */
  animation: spin 2s linear infinite;
}

/* Only for example --> */ @keyframes spin { to { transform: rotate(1turn); } }

/* Only for example --> */ body{margin:0;min-height:100vh;background-image:url(https://i.stack.imgur.com/m9NKc.png),radial-gradient(#fff8,#000f);display:flex;flex-flow:column nowrap;justify-content:space-around;align-items:center;gap:1em;background-position:0% 0%;background-repeat:no-repeat;background-size:auto}

<div class="loader"></div>

БЛОГ НА HUSL

Полукруг с бордером и градиентом

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