This is the design I'm going for: design with rounded corners
And this is what I have implemented so far: implementation with blocky segments
How can I achieve the rounded corners effect on opposite corners, as shown in the intended design? Right now, each of the segments are their own HTML element and are encompassed in a HTML block that does have the rounded corner effect, but it is under the rectangular segments. Is there some sort of clipping that I can do so that the shape of the HTML element under the segments can be superimposed onto the segments so that they have the rounded colors in the right spots (I don't want the breaks between colors to be rounded also)?
This is in angular, by the way.
Use border-radius on the parent + overflow: hidden.
