How to color a div half blue, half yellow?

Question

Please, help me to find the easiest way to achieve this result with just one single div?

<div></div>

Solution 1

You can do this:

Here is the JSFiddle demo

Snippet Example

 div{
    	width:400px;
    	height:350px;
    	background: linear-gradient(to right, blue 50%, yellow 50%);
    }

<div></div>

Solution 2

Try this code:

div {
  height: 200px;
  width: 400px;

background: blue; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, blue 50% , yellow 50%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, blue 50%, yellow 50%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, blue 50%, yellow 50%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, blue 50% , yellow 50%); /* Standard syntax */
  }

<div></div>

Solution 3

Here you go.

div {
  width: 400px;
  height: 200px;
  background:yellow;
  }

div::after {
  width:50%;
  height:100%;
  content:"";
  background: blue;
  display:inline-block;
}

<div> 
</div>

Comments

[WitVault]

and where will you apply that #Id ?

[KajalTiwari]

You can use this inside div tag like css class we use.

[Leon Csergity]

Is there a way to do this horizontally?

[WitVault]

@LeonCsergity horizontally its much easier as by default a div acquires all width available in its container. So you just need to adjust height to 50% for each div.

[Makotosan]

This will not accomplish the task of using just one single div.