title: Quarter of a ring with CSS and HTML
body: <p>I'm trying to create a ring shape in css, divided into 4 quarters.
  Each quarter will represent a button.</p>
  
  <p>I've been playing around with the following code:</p>
  
  <pre><code>#quarterCircleTopLeft{
       width:100px;
       height:100px;
       border:1px solid #000;
       background: orange;
       border-radius: 90px 0 70px 0;
       -moz-border-radius: 90px 0 70px 0;
       -webkit-border-radius: 90px 0 70px 0;
  }
  </code></pre>
  
  <p>Which produces this (disregard the grey lines):</p>
  
  <p><img src="https://i.stack.imgur.com/VJ2kJ.png" alt="enter image description here"></p>
  
  <p>Obviously, I want the border at the right bottom to be inverted. However, since this is a button I cannot use another shape to produce a cutout (as this would overlap with other buttons of the menu). I've added a red line to show approx how I would want the border to go. Sorry, my paint skills are bad :-P</p>
  
  <p>How can I invert the border or in another way produce the shape I want?</p>