Login/Register
How to color a div half blue, half yellow?
Asked Answered
Solved htmlcssbackground-color
P

6

21

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

<div></div>

enter image description here

Prescott answered 28/9, 2016 at 6:10 Comment(0)
T
60

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>
Threesquare answered 28/9, 2016 at 6:15 Comment(0)
M
8

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>
Misquotation answered 28/9, 2016 at 6:16 Comment(0)
S
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>
Squeeze answered 28/9, 2016 at 6:23 Comment(2)
Is there a way to do this horizontally? – Cordwood
@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. – Squeeze
A
0

html:

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

css:

.blue_yellow {
background: linear-gradient(to left, blue 50%, yellow 50%);
}
Acklin answered 28/9, 2016 at 6:16 Comment(0)
B
0
    #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

Balkan answered 28/9, 2016 at 6:27 Comment(3)
and where will you apply that #Id ? – Squeeze
You can use this inside div tag like css class we use. – Balkan
This will not accomplish the task of using just one single div. – Basaltware
I
0
**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>
Insensitive answered 16/8, 2019 at 6:37 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.