How to make a CSS bar go from right to left?


Tags: css,css3

Problem :

Most examples on CSS bars are showing how to make a wrapper, and have an inner bar going from left to right.

I am looking to combine 2 bars, one from left to right, but on the same hight a bar from right to left.

So far, I have:

<div id="skills">
  <div class="grid left">
    <div class="bar pct-75"><div class="inner"></div>   </div>
  </div>
  <div class="labels">
    <p>Label</p>
  </div>

  <div class="grid right">
    <div class="bar pct-75"><div class="inner"></div>   </div>
  </div>
</div>

And CSS:

.grid {
  border-left: 1px dotted #e8ab6a;
  border-bottom: 1px dotted #e8ab6a;
  float: left;
  padding: 10px 0;
  position: relative;
}

.bar {
  height: 15px;
  margin-bottom: 20px;
  position: relative;
  width: 100%;
  z-index: 1;

  .inner {
    background-color: #feac40;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
  }
}

Fiddle: http://jsfiddle.net/f8WKt/

What is the trick to make the bar from right to left?



Solution :

try adding

.left .bar.pct-75 .inner {
    left: 25%;
    right: 0;
}

http://jsfiddle.net/f8WKt/3/

Assuming you want to join the 2 bars at the middle


    CSS Howto..

    How to make inner div of Flexbox height of parent

    CSS How to use margins with different divs

    How to add shadow to reverse c radial gradient only at the edges?

    How to convert this CSS animation to use GPU level, instead of updating layer tree

    How to change my Mercurial web interface aspect

    How to vary the tone of an image dynamically using only css?

    CSS: how to remove the indent of list items shown in Firefox

    how to create a fullscreen website design?

    BackboneJS + HandlebarsJS - how to add image based on css

    How to start Bootstrap carousel with the first image at each occurrence of a modal window? [closed]

    How to fix an overlapping image in CSS?

    Simple Form button submit doesn't show in IE 8-7

    How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

    (html/css) How do I remove the margin appearing from my header, and have it only apply to my Logo?

    How to CENTER a Vertical Menu for ALL Screen Resolutions?

    Empty div with 2px width and background color doesnt show with height as 100%

    How to center a div horizontally in a table using CSS

    How to style a table from horizontal layout to vertical layout with CSS

    how to make nested flexboxes work

    CSS, borders: How do I prevent a border added to a table cell from displacing neighboring cells?
    I think you'll either need to size all non border cells wider and higher by the width of the line around it. or you given them all borders and set...
    Read more

    How to implement a CDN failsafe for css files?

    How to select span element inside multiple div classes and id's?

    How to “crop” a rectangular image into a square with CSS?

    How to add a color in the
    bottom content area?

    How to use css to crop images from left and right without knowing dimensions

    How to prevent CSS inheritance where child selectors fail?

    How can I make the input stay as it is in the hover mode, when it contains any text?

    How to make a span tag wider with an alphabet inside?

    How to view the html code that is used to display hidden json data?

    How to add spacing to text start in css