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>

Answer 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>

Answer 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>

Answer 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>

Answer 4

html:

<div class="blue_yellow"></div>

css:

.blue_yellow {
background: linear-gradient(to left, blue 50%, yellow 50%);
}

Answer 5

    #leftHalf {
   background-color: blue;
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}

#rightHalf {
   background-color: yellow;
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}

Try with above CSS code

Answer 6

**Try This**
.container{
                height:120px;
                width:120px;
                border-radius:50%;
                background: linear-gradient(to right, rgb(183,88,206) 50%, rgb(170,61,200) 50%);
                transform: rotateY(0deg) rotate(45deg);
            }

 <html> <head> <title>Test Box</title> <style> .container{ height:120px; width:120px; border-radius:50%; background: linear-gradient(to right, rgb(183,88,206) 50%, rgb(170,61,200) 50%); transform: rotateY(0deg) rotate(45deg); } </style> </head> <body> <div class="container"> </div> </body> </html>

How to color a div half blue, half yellow?

Question

6 answers

solution1
51 ACCPTED 2016-09-28 06:15:13

solution2
7 2016-09-28 06:16:51

solution3
3 2016-09-28 06:23:34

solution4
0 2016-09-28 06:16:21

solution5
0 2016-09-28 06:27:17

solution6
0 2019-08-16 06:37:35

How to color a div half blue, half yellow?

Question

6 answers

solution1 51 ACCPTED 2016-09-28 06:15:13

solution2 7 2016-09-28 06:16:51

solution3 3 2016-09-28 06:23:34

solution4 0 2016-09-28 06:16:21

solution5 0 2016-09-28 06:27:17

solution6 0 2019-08-16 06:37:35

solution1
51 ACCPTED 2016-09-28 06:15:13

solution2
7 2016-09-28 06:16:51

solution3
3 2016-09-28 06:23:34

solution4
0 2016-09-28 06:16:21

solution5
0 2016-09-28 06:27:17

solution6
0 2019-08-16 06:37:35