html - How can apply multiple background color to one div

Question

I've some scenario where I should use multiple background color to one div. It's better for me rather than using background images or additional div. But, I can't find easier way to use it by CSS. So, I need help about some scenario. Please, see the image:

(1) I want to build "A". for that I wrote:

div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }

But, after writing that code, it'll like "B". But, I want exactly like "A". So, by css/css3 how can I do it(without adding more divs)?

(2) Is it possible to make one portion smaller than other portion? For example, at "C", blue color is smaller(at height) than the other portion. How, can I apply multiple background color to one div with making one portion smaller like "C"(without adding additional divs to "C")?

Update: After @Mohammad's answer, I've tried with that way. But, for "C" scenario, I can't decrease the height of blue portion. Can you please, tell me how can I do it?
jsfiddle.net/mFjQ6

Answer 1

The A div can actually be made without :before or :after selector but using linear gradient as your first try. The only difference is that you must specify 4 positions. Dark grey from 0 to 50% and ligth grey from 50% to 100% like this:

background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);

As you know, B div is made from a linear gradient having 2 positions like this:

background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%);

For the C div, i use the same kind of gradient as div A ike this:

background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);

But this time i used the :after selector with a white background like if the second part of your div was smaller. * Please note that I added a better alternative below.

Check this jsfiddle or the snippet below for complete cross-browser code.

div{
    position:relative;
    width:80%;
    height:100px;
    color:red;
    text-align:center;
    line-height:100px;
    margin-bottom:10px;
}

.a{
    background: #9c9e9f; /* Old browsers */
    background: -moz-linear-gradient(left,  #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#f6f6f6), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* IE10+ */
    background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}

.b{
    background: #9c9e9f; /* Old browsers */
    background: -moz-linear-gradient(left,  #9c9e9f 0%, #f6f6f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* IE10+ */
    background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}

.c{    
    background: #9c9e9f; /* Old browsers */
    background: -moz-linear-gradient(left,  #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* IE10+ */
    background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); /* IE6-9 */
}
.c:after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:50%;
    height:20%;
    background-color:white;
}

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>