You can create something like c using CSS multiple-backgrounds.
div {
background: linear-gradient(red, red),
linear-gradient(blue, blue),
linear-gradient(green, green);
background-size: 30% 50%,
30% 60%,
40% 80%;
background-position: 0% top,
calc(30% * 100 / (100 - 30)) top,
calc(60% * 100 / (100 - 40)) top;
background-repeat: no-repeat;
}
Note, you still have to use linear-gradients for background types, because CSS will not allow you to control the background-size of a single color layer. So here we just make a single-color gradient. Then you can control the size/position of each of those blocks of color independently. You also have to make sure they don't repeat, or they'll just expand and cover the whole image.
The trickiest part here is background-position. A background-position of 0% puts your element's left edge at the left. 100% puts its right edge at the right. 50% centers is middle.
For a fun bit of math to solve that, you can guess the transform is probably linear, and just solve two little slope-intercept equations.
// (at 0%, the div's left edge is 0% from the left)
0 = m * 0 + b
// (at 100%, the div's right edge is 100% - width% from the left)
100 = m * (100 - width) + b
b = 0, m = 100 / (100 - width)
so to position our 40% wide div 60% from the left, we put it at 60% * 100 / (100 - 40) (or use css-calc).