How can I add a color of the bottom part of a `<div>` using CSS? Let's say for example I have a `<div>` with the height of `100px` and I want the `top or upper 50%` of the `<div>` will be shaded with blue and the `50% bottom part` will be shaded with red. So how it is possible? 

**NOTE:** Only one `<div>` needs to be use.