Question

Can I make the progress bar below by using CSS only, that is, without using any images? In the second case, one can round the green corners on the left side of the div and not round them on the right side. However, is there a solution for the first and third case without resorting to an external image?

Note, that there should be a smooth transition from the bar being completely empty to being completely green.

Answer 1

Css Tricks has a good article showing how you would achieve this.

Example

Re: Comment
Looks pretty close to me
Notice I have changed the widths of the span elements.

LAST UPDATE
OP wanted it to look more like his example

Change the following two lines of CSS in the demo

.meter {
    background: none repeat scroll 0 0 #555555;
    border-radius: 25px 25px 25px 25px;
    box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.3) inset;
    height: 40px;
    margin: 60px 0 20px;
    overflow: hidden; /* remove padding and add me */
    position: relative;
}
.meter > span {
    background-color: #2BC253;
    background-image: -moz-linear-gradient(center bottom , #2BC253 37%, #54F054 69%);
    border-radius: 20px 0px 0px 20px; /* change me */
    box-shadow: 0 2px 9px rgba(255, 255, 255, 0.3) inset, 0 -2px 6px rgba(0, 0, 0, 0.4) inset;
    display: block;
    height: 100%;
    overflow: hidden;
    position: relative;
}