Изменение формы стрелок в индикаторе выполнения
Я работаю над угловым приложением, в котором я делаю индикатор выполнения. Мой код выглядит следующим образом:
CSS:
.progressbar {
height: 56px;
background: lightgray;
box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
animation: change 1s linear infinite;
margin: 5px -10px;
clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
}
.progressbar:first-child {
margin-left: 0;
clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
}
.progressbar:last-child {
margin-right:0;
}
.bar {
display:flex;
gap:20px; /*You can use now this property to play with the separation between the bars*/
}
.progressbar.active{
background:
linear-gradient(to right, red 0%, yellow 50%, green 34%)
left/var(--p, 100%) fixed,
lightgray;
box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
}
HTML:
<div class = "bar">
<div class = "progressbar active" style = "width:100%;"></div>
<div class = "progressbar" style = "width:100%;"></div>
<div class = "progressbar" style = "width:100%;"></div>
</div>
При этом я получаю такой индикатор выполнения . Это очень близко к моему желаемому результату. Но с этим кодом форма стрелок баров неправильная. Форма стрелки, которую я хочу, это. Как я могу изменить форму своих стержней точно так же, как требуется, как показано на изображении.
Ответы 1
- Добавьте отрицательное правое поле к вашим вкладкам (+ желаемый размер промежутка)
- Добавьте положительное поле справа к родительской оболочке (того же размера)
Легко достижимо всего с двумя переменными CSS --d и --gap. Отредактируйте их значения для достижения желаемого результата:
/*Quick Reset*/
* { margin: 0; box-sizing: border-box; }
body {
font: 1rem/1.3 sans-serif;
}
/*
* Progressbar
*/
.bar {
--d: 1rem; /* arrow depth */
--gap: 0.3rem; /* arrow thickness, gap */
display: flex;
margin-right: var(--d);
}
.bar-step {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0.6rem var(--d);
margin-right: calc(var(--d) * -1 + var(--gap));
background: #d9e3f7;
color: #23468c;
clip-path: polygon(
0% 0%,
calc(100% - var(--d)) 0%,
100% 50%,
calc(100% - var(--d)) 100%,
0% 100%,
var(--d) 50%
);
}
.bar-step:first-child {
clip-path: polygon(
0% 0%,
calc(100% - var(--d)) 0%,
100% 50%,
calc(100% - var(--d)) 100%,
0% 100%
);
}
.bar-step.active {
background: #23468c;
color: #fff;
}<div class = "bar">
<div class = "bar-step active">Step 1</div>
<div class = "bar-step">Step 2 text</div>
<div class = "bar-step">Step 3</div>
<div class = "bar-step">Step 4</div>
</div>@Romio, изменив первое значение заполнения
Я хочу иметь полосу с двумя цветами. Аналогично шагу 1 для 60% красного цвета и остальных 40% бело-зеленого цвета. Как я могу сделать это в вашем решении?
@Romio, пожалуйста, поделитесь jsfiddle.net
Проблема с градиентом заключается в том, что при изменении цвета на экране отображается сочетание цветов. Я хочу, чтобы, если я даю красный цвет, эта область должна быть полностью красной, а после этого должен начаться зеленый цвет.
Я использую только ваш код
@Romio Ромио, я не уверен, что понимаю желаемый конечный результат
можно ли привести пример в вашем коде? И последняя вещь для первого ребенка, которому вы дали многоугольник css для границы. Такая же граница, которую я хочу для последнего ребенка. Я пробовал тот же код, но он не работал
@Romio попробуй понять, как работают полигоны. Затем используйте :last-child и используйте что-то похожее, как это делается с :first-child, только чтобы возвести в квадрат правую сторону, а не левую.
Я прикрепил скриншот желаемого результата. На 80% у меня один цвет, а на остальные 20% немного светлого цвета. Здесь видно четкое разделение цвета. Что я не получаю, используя линейный градиент
Для этого вам понадобятся два дочерних элемента. Эти элементы должны иметь отступы вместо родителя. Установите соответствующие цвета фона, и все готово.
Ожидается, что требования к вопросам @Romio не изменятся, как вы. Если у вас есть другая проблема (и это то, как продвигаться вперед с новым дизайном), вы можете задать новый вопрос - с новой, конкретной проблемой, с которой вы столкнулись. Но сначала, пожалуйста, попробуйте провести небольшое исследование самостоятельно - и опубликуйте код, который вы сделали до сих пор, лучший из них.
хорошо, я когда-нибудь добавлю еще один вопрос и дам вам знать
Хороший! Удачного кодирования, обучения и изучения. Держите меня в курсе
Как я могу изменить высоту баров индикатора выполнения?