2

Как сделать вот такие фоны для блоков? введите сюда описание изображения

3
  • первый background-color: green;, воторой и третий background-color:Cyan; . Хотя первый возможно lime a не green
    – Arnial
    Commented 15 июл. 2016 в 16:17
  • @Arnial ну а чтобы они не все пространство по ширине занимали как сделать? Commented 15 июл. 2016 в 16:21
  • добавить with: <сколькото>px;;
    – Arnial
    Commented 15 июл. 2016 в 16:30

3 ответа 3

2

Числа с правой стороны, как я понимаю, не статические, поэтому используем для них доп. элемент <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>

2

Создаём обычный блок и устанавливаем ему ширину в процентах. Прогрессбары должны быть в контейнере с заданой шириной, определяющей максимальную длину прогрессбара

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>

1

Примерно вот так:

#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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.