How to make these backgrounds for the blocks? enter image description here

  • first background-color: green; The second and third background-color:Cyan; . Although the first is perhaps lime a not green - Arnial
  • @Arnial Well, so that they do not occupy the entire width of the width how to do? - Vitali Skripka
  • add with: <сколькото>px; ; - Arnial

3 answers 3

Create a regular block and set its width in percent. Progress bars must be in a container with a given width that defines the maximum length of the progress bar

 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>

    Like this:

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

      The numbers on the right side, as I understand it, are not static, so we use for them the add. the <span> element. And so, it would be possible to manage to still embrace the pseudo-element :: 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>