using gradient but without mixing color

Issue

I don't know if that is a stupid question or something like that but i want a div to be filled certain percent by one color and remaining part by other.

And the gradient property

.div{
     background: linear-gradient(to right, #000 50%, #fff 50%);
}

Results into

.div{
     background: linear-gradient(to right, #000 28%, #fff 72%);
}

And this results into

i want to get the white and black not to mix and be seperated on all percentages.

Solution

try this

.div{
    background: -webkit-linear-gradient(left, black 50%, white 0%);
    background: -moz-linear-gradient(left, black 50%, white 0%);
    background: -ms-linear-gradient(left, black 50%, white 0%);
    background: linear-gradient(left, black 50%, white 0%);
}

Answered By - GaurabDahal