title: Drawing a shield-like figure in CSS
body: <p>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.</p>
  
  <p>I know how to draw a full circle with <code>border-radius: 50%</code> 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.</p>
  
  <p>Something like this, except for the bottom black part. The yellow and top black part should both be the same color.</p>
  
  <p><img src="https://i.stack.imgur.com/rtyFc.png" alt="shield example"></p>
  
  <p>Any suggestions?</p>