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

Question

[Ne7Le4Der]

<div className="number-circle">
            <div className="number-circle__number">
                75
            </div>
</div>

.number-circle {
    @include flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    height: 130px;
    border: 15px solid;
    border-image: linear-gradient(to right, $orange 50%, $darkGrey 50%) 1;
    border-radius: 50%;

    &__number {
        font-size: 40px;
    }
}

Сейчас пытаюсь так, но нагуглил что border-image и border-radius не работают вместе. Нужно то же самое что на скрине (это то, что в данный момент у меня), только чтобы border был круглый

Answer 1

[Сергей delphinpro]

У вас нет градиента. А это сильно упрощает задачу.
<div class="div">75</div>

.div {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 30px;
}
.div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 20px solid red;
  border-color: red red green green;
  border-radius: 100%;
  transform: rotate(45deg);
  pointer-events: none;
}

Comments

[Ne7Le4Der]

Я не очень верно пример привёл, процент заполнения круга цветом $orange должен быть равен числу, т.е. там может быть

border-image:  linear-gradient(to right, $orange 66%, $darkGrey 34%) ;

Я так понимаю в той реализации, которую предложили вы - это сделать не получится

[Сергей delphinpro]

Ne7Le4Der, тогда да. так не выйдет.

[Сергей delphinpro]

Ne7Le4Der, ну а вообще простейший вариант - это два блока
на заднем градиент и паддинг, на внутреннем фон

<div><div>75</div></div>

div {
  background:linear-gradient(to right, $orange 66%, $darkGrey 34%) ;
  padding: 20px;
  width: 100px;
  height: 100px;
  border-radius: 100%;
}
div > div {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 100%;
}

Answer 2

[Андрей]

Делал следующим образом: блоку, который надо обернуть, прописал стиль position: relative. И создал внутри этого блока div, с стилями:
position: absolute;
top: -2px;
left: -2px;
bottom: -2px;
right: -2px;//толщина бордера
border-radius: который нам нужен
background: градиент, который нам нужен.

Answer 3

[Antony Bark]

Градиент бордер https://codepen.io/tolfy/pen/ZRJKye

Answer 4

[SLlirik]

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


.box {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.box::before {	
    --border-width: 10px;   /*Ширина границы*/
    content: '';
    position: absolute;
    inset: calc(0px - var(--border-width));
    z-index: -1;
   
   	/*
   	если нет поддержки inset:
   	top: var(--border-width);
   	left: var(--border-width);
  	right: var(--border-width);
   	bottom: var(--border-width);
   	*/
   	
    padding: var(--border-width);
    border-radius: inherit;
    background: linear-gradient(45deg, yellowgreen, orangered);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}