I'm looking for a way to draw a shield-like figure in CSS. Roughly the bottom half of the figure should be a half circle, while the upper half should be part of an upside-down triangle / trapezoid. So where the half-circle ends, it should continue upwards (with a small slope). The top should be flat.

I know how to draw a full circle with `border-radius: 50%` and I know how to draw an upside-down triangle with transparent borders in CSS, but somehow I never get them to line-up properly.

Something like this, except for the bottom black part. The yellow and top black part should both be the same color.

![shield example](https://i.stack.imgur.com/rtyFc.png)

Any suggestions?