Filling background using CSS - two different colors and one overlapping another

Question

Can I create such fill only using CSS (without image as background) and how?

I mean - I have two divs that are filled with two colors, but I can fill them only in regular color, but I need one "overlapping" part.

Maybe I need two divs and fill them with background-color and the third div with "two overlapping" background colors. However, I do not know how to create this overlapping part.

Answer 1

Of-course you can do that using multiple elements and overlapping them but the easiest method is to use angled linear-gradient for background like in the below snippet. Making the color stop point of the first color as the start point of the second color makes the gradient output look like 2 solid colors instead of a gradual change from one to another. (Note: I had added a delta of 0.5% to the color start of the second color because angled gradients generally produce jagged edges and this avoids it.)

.two-colors {
  height: 75px;
  width: 400px;
  background-image: linear-gradient(135deg, blue 60%, black 60.5%);
}

<div class='two-colors'></div>