How to fill different color for each section on a square which is divided by a single line?

Please use a gradient for multi-color in a box.

See the below pic

You need a gradient that starts with a red color for example, then at the middle position add another red color. Next to it a blue and at the end the blue color again.

To translate this to positions that would be:

1. red at 0%
2. red at 50%
3. blue at 50%
4. blue at 100%

This will create a gradient with 2 colors, but instead of gradually fading from one to another, you have a harsh jump at the 50% position from red to blue.