title: Semi Circle with text in CSS like in picture?
body: <p><a href="https://i.stack.imgur.com/xQYp4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xQYp4.png" alt="enter image description here"></a></p>
  
  <p>As you can see in the image above it's a semi circle spanning the width of the page and contains the text <code>WATCH IT FIRST</code>. So after playing around for a long time with <code>border-radius</code> values I was not able to achieve this specific shape. I'm very tired and it didn't dawn on me that it isn't a perfect semi-cirlce. It's stretched and I have no idea how to achieve that look. Any help would be so, so very appreciated. Thanks.</p>
  
  <p>EDIT: I found many questions asking about semi-circles but not stretched.</p>