help!

Question

i just create a square shape using <div> element..
<div id=square><div>
#square {
width:100px;
height:100px;
background-color:gold;
}
my question is, how to make the square has 2 different color? the square will be divided by half, the top of the square will be colored gold and the bottom is red..

Answer 1

direction of gradient, and it's shorter than "to bottom" 😉

Answer 2

background: linear-gradient(to top, #f00 0%, #f00 49.9%, #ffd700 50%); put your colors

Answer 3

why there is "to top" in the bracket?

Answer 4

i removed it ("to top") and nothing is happen, why?

Answer 5

because to top is default value

Answer 6

btw, how to move the square to bottom? i mean.. i want to move the square to bottom in any value of px (i guess) ..

Answer 7

position : fixed;
bottom : 0;

Answer 8

thnx 😊