using gradient but without mixing color

Question

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.

Answer 1

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%);
}

Answer 2

Why do you want to use gradient in first place if you dont want them to mix?

Anyway this is working:

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

you can put any value for white. It wont mix.

Answer 3

When you did:

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

it means: Black (#000) from 0% to 28%, then start a gradient to white (#fff) until reach 72% and after this gradient, use white until the end.

So you can use:

background: linear-gradient(to right, #000 28%, #fff 28%);

This way you'll get: black from 0 to 28%, a gradient from 28% to 28% (it means, no gradient), and white from 28% to the end. So you'll get only back and white, without the gradient between them.

Answer 4

do you mean :

div{
     background: linear-gradient(to right, #000 28%, transparent 28%, transparent 72%,#fff 72%);
  color:green
}
body {
  background:yellow
    }

<div> lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla</div>