3 ответа
Числа с правой стороны, как я понимаю, не статические, поэтому используем для них доп. элемент <span>
. А так, можно было бы обойтись еще обним псевдоэлементом ::after
* {
margin: 0;
padding: 0;
}
ul {
width: 250px;
list-style: none;
border-left: 2px solid #7db4c9;
}
li {
position: relative;
margin: 5px 0;
padding: 5px;
}
li::before {
position: absolute;
top: 0;
left: 0;
content: '';
height: 100%;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
z-index: -1;
}
li span {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
li:nth-child(1)::before {
background: #b2e19b;
width: 80%;
}
li:nth-child(2)::before {
background: #abe2f7;
width: 25%;
}
li:nth-child(3)::before {
background: #abe2f7;
width: 15%;
}
<ul>
<li>Ручное бронирование <span>11</span>
</li>
<li>Пакетные туры <span>3</span>
</li>
<li>Отели <span>1</span>
</li>
</ul>
Создаём обычный блок и устанавливаем ему ширину в процентах. Прогрессбары должны быть в контейнере с заданой шириной, определяющей максимальную длину прогрессбара
function width() {
document.querySelector('.a').style.width = '100%';
document.querySelector('.b').style.width = '30%';
document.querySelector('.c').style.width = '20%';
}
function reset() {
document.querySelector('.a').style.width = '10%';
document.querySelector('.b').style.width = '10%';
document.querySelector('.c').style.width = '10%';
}
.container {
width: 256px;
font-family: Segoe UI;
font-size: 14px;
position: relative;
}
.a {
background: rgb(176, 226, 153);
border-left: 1px solid rgb(131, 178, 108);
transition: width .5s ease;
}
.b, .c {
background: rgb(171, 226, 247);
border-left: 1px solid rgb(125, 180, 201);
transition: width .5s ease;
}
.progressbar {
height: 24px;
border-radius: 0 3px 3px 0;
margin-bottom: 2px;
}
.progressbar a {
float: left;
margin: 2px 0 0 6px;
white-space: nowrap;
}
.progressbar span {
position: absolute;
left: 288px;
margin-top: 2px;
font-weight: 600;
}
<div class='container'>
<div class='progressbar a' style='width: 10%'><a>Ручное бронирование</a><span>11</span></div>
<div class='progressbar b' style='width: 10%'><a>Пакетные туры</a><span>3</span></div>
<div class='progressbar c' style='width: 10%'><a>Отели</a><span>1</span></div>
</div>
<button onclick='reset()'>reset</button>
<button onclick='width()'>width</button>
Примерно вот так:
#tutu {
border: 1px solid #4e642d;
width: 100%;
}
#tutu div {
border-right: 2px solid #4e642d;
background-color: rgb(0, 255, 0);
width: 20%;
white-space: nowrap;
}
<div id="tutu">
<div>Тут была зеленая полоска на 20% ширины</div>
</div>
background-color: green;
, воторой и третийbackground-color:Cyan;
. Хотя первый возможно lime a не greenwith: <сколькото>px;
;