title: How can apply multiple background color to one div
body: <p>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:</p>
  
  <p><a href="https://imgur.com/AhrhFWJ" rel="noreferrer"><img src="https://i.imgur.com/AhrhFWJ.png" /></a></p>
  
  <p>(1) I want to build "A". for that I wrote:</p>
  
  <pre><code>div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }
  </code></pre>
  
  <p>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)?</p>
  
  <p>(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")?</p>
  
  <p>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? <br />
  jsfiddle.net/mFjQ6</p>