How to make two-coloured stripe using CSS?


Tags: html,css,colors

Problem :

I want to make the following stripe. What is the right way of doing that?

enter image description here



Solution :

All you need is a short div with darker color inside another with lighter color.

That's how Bootstrap implement its progress bar.

HTML:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

CSS:

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

enter image description here


    CSS Howto..

    Trade off for CSS sprites: how many images to combine into one

    How to get the type word inside the input field once after pressing the Comma key and not after pressing space bar

    How to load a dynamic view css file using requireJs & Backbone

    When I click on each button its shows me the same content of the first button

    How to create transparent background color in html & css [duplicate]

    How can I change the CSS values of multiple elements when my sticky menu becomes fixed?

    How would you code this: Grid-breaking shapes

    How to create CSS internal style sheet in CakePHP

    How can a div be aligned center using jquery [closed]

    Track cursor hover position and show hide menu similar to OSX dock / Windows start bar

    How to add another line on overflow in a text input?

    How to extract icon from picture and display it in page? (by javascript or jquery or css)

    How to keep images locked at specific height within Bootstrap container

    How to get css width of class?

    How can I give an image a black opaque overlay?

    how to make css contents like boxes, text as center?

    how to make a image in div to be dragged just downwards using html5 css jquery animation?

    loading images to show them offline

    How to include css and jquery in joomla component

    How to restrict character limit by line or # of characters with css?

    CSS: can't understand how to work with the z-index

    How to center a div in html & css, always keep the aspect ratio, and fill max screen width/height?

    How to hightlight non editable backgrid cells?

    How to apply custom css to split post into multiple page

    How to fill an HTML form with CSS?

    How to get custom css to load after richfaces?

    How do you make a nav bar “sticky”?

    How do I centralize an ordered list?

    How can I get the text style from window.selection()?

    How to ignore body element style when there is a class at element inside