@Ne7Le4Der

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

<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 был круглый
6220b9ef851be507183435.png
  • Вопрос задан
  • 215 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
У вас нет градиента. А это сильно упрощает задачу.
<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;
}


6220d11181f79772148139.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@wug1
Новичок
Делал следующим образом: блоку, который надо обернуть, прописал стиль position: relative. И создал внутри этого блока div, с стилями:
position: absolute;
top: -2px;
left: -2px;
bottom: -2px;
right: -2px;//толщина бордера
border-radius: который нам нужен
background: градиент, который нам нужен.
Ответ написан
Комментировать
tolfy
@tolfy
Фирменный стиль
Градиент бордер https://codepen.io/tolfy/pen/ZRJKye
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы