Градиент границы с радиусом и прозрачностью

Я хочу сделать что-то вроде этого:

Я хочу border-radius, transparency (чтобы увидеть фон) и возможность заполнить от 0% до 100% border.

На данный момент у меня есть этот код:

body{
    background: lightgrey;
}

.avatar{
    padding: 10px;
    display: inline-block;
    position: relative;
    z-index: 0;
}

.avatar:before{
    width: 180px;
    aspect-ratio: 1;
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 8px;
    border-radius: 100%;
    background: linear-gradient(to top, transparent 25%, blue 25%, blue);
    -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: clear;
    mask-composite: clear;
}

<html>
    <body>
        <div class = "avatar"></div>
    </body>
</html>

Как можно заполнить X% границы?

Спасибо!

html css

15.11.2022 09:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

попробуйте, как показано ниже,

   body{
        background: lightgrey;
    }
    
    .avatar{
        padding: 10px;
        display: inline-block;
        position: relative;
        z-index: 0;
    }
    
    .avatar:before{
        width: 180px;
        aspect-ratio: 1;
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 8px;
        border-radius: 100%;
        background: linear-gradient(to top, transparent 25%, blue 25%, blue);
        -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: clear;
        mask-composite: clear;
    }
    .mainside{
        
        display: inline-block;
        position: relative;
        z-index: 0;
    }
    
    .mainside:before{
        width: 180px;
        aspect-ratio: 1;
        content: "";
        position: absolute;
        z-index: 9;
        inset: 0;
        padding: 8px;
        border-radius: 100%;
        background: linear-gradient(to right, transparent 90%, #878789 25%, #adadad);
        -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: clear;
        mask-composite: clear;
    }

    <html>
        <body>
            <div class = "mainside">
                <div class = "avatar"></div>
            </div>
            
        </body>
    </html>

15.11.2022 10:06

Это называется радиальным индикатором выполнения, если вы хотите найти больше примеров. Вот небольшой пример:

div {
  display: flex;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(red var(--progress), gray 0deg);
  font-size: 0;
}

div::after {
  content: attr(data-progress) '%';
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 10px;
  border-radius: 50%;
  background: white;
  font-size: 1rem;
  text-align: center;
}

<div data-progress = "80" style = "--progress: 80%;"></div>

Вот лучшее решение, основанное на том, что вы просили.

Надеюсь, это поможет.

Это великолепно, но не могли бы вы показать, как создать только часть круга, как просили?

— 15.11.2022 10:43

Да. здесь то, что вы ищете. Хитрость здесь в том, что вам нужно настроить высоту и ширину в соответствии с вашими потребностями и использовать JavaScript для поворота элемента, чтобы увидеть эффект заливки для фона.

— 15.11.2022 10:53

Спасибо за ваш ответ! И если я хочу установить высоту barOverflow на 70 пикселей вместо 45 пикселей, мне нужно динамически добавить верхний цвет границы, чтобы заполнить более 180 °?

— 15.11.2022 11:41

Да. Это потому, что заполненная полоса на самом деле представляет собой прямоугольник с радиусом границы, чтобы сделать его круглым, и цветами границы для заливки. Теперь в зависимости от того, насколько вы установите его высоту, будут видны и другие его стороны. Таким образом, в этом случае вам придется заполнить верхнюю или левую границу в зависимости от того, с какой стороны он будет отображаться. Надеюсь, это имеет смысл.

— 15.11.2022 12:01

15.11.2022 10:08

Ответ принят как подходящий

вот идея, основанная на моем предыдущем ответе:

.box {
  width: 100px;
  aspect-ratio: 1;
  display:inline-block;
  border-radius :50%;
  padding: 10px;
  background: conic-gradient(from -136deg, blue calc(var(--p)*.76),#f3f3f3 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
          mask-composite:exclude;
   clip-path:polygon(0 0,100% 0,100% 100%, 50% 50%,0 100%);
}

body {
  background:linear-gradient(to right,red,yellow);
}

<div class = "box" style = "--p:5%;"></div>
<div class = "box" style = "--p:20%;"></div>
<div class = "box" style = "--p:50%;"></div>
<div class = "box" style = "--p:60%;"></div>
<div class = "box" style = "--p:75%;"></div>
<div class = "box" style = "--p:100%;"></div>

Хороший ответ! Я понимаю -136 градусов, но почему *.76?

— 16.11.2022 09:16

@Валентин С. потому что вам не нужно заполнять полный круг, но меньше, чем полный круг, поэтому нам не нужно переходить к 100%, а только к 76%.

— 16.11.2022 09:20

И у вас есть решение для Firefox, чтобы удалить линию градиента внизу?

— 07.12.2022 09:21

15.11.2022 16:45