How to color a div half blue, half yellow?
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>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>