How to style 25% of div one solid color and another 75% div to another solid color?

Issue

I have this div:

<div class="sh-continer-fluid bg-blue"><div>

I want to style 25% of this div to blue color and 75% of div to white color. so, I am doing it using CSS:

.bg-blue {
    background-color: #5366ea;
    background: linear-gradient(90deg, #FFC0CB 25%, #00FFFF 75%);
}

But it's showing me floating gradient color. I need solid gradient color. Any idea?

Not this:

I mean this:

Solution

You could try something like this:

.bg-blue {
  width: 100%;
  height: 25px;
  background: -moz-linear-gradient(left, blue 75%, white 25%);
  background: -webkit-linear-gradient(left, blue 75%, white 25%);
  background: linear-gradient(to right, blue 25%, white 25%);
}

I've put the height just for testing, you can adjust it as you want then.

Answered By - Student_GA