Quarter of a ring with CSS and HTML - html

Question

I'm trying to create a ring shape in css, divided into 4 quarters.
Each quarter will represent a button.
I've been playing around with the following 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;
}
Which produces this (disregard the grey lines):
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
How can I invert the border or in another way produce the shape I want?

Answer 1

I'd do something like:
http://dabblet.com/gist/5476973
In short, lots of border radius + a white circle on top of everything.
On my example, I'd then bind click events onto the divs using javascript, or just make them all <a> elements instead and add a display:block;.
/**
* Quarter Circles
*/
.main {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
}
.quarter {
position: absolute;
width: 50%;
height: 50%;
transition: background-color 0.2s ease-in-out;
}
.quarter:hover {
background-color: pink;
}
.quarter1 {
top: 0;
left: 0;
background-color: red;
border-radius: 100% 0 0 0;
}
.quarter2 {
top: 0;
right: 0;
background-color: blue;
border-radius: 0 100% 0 0;
}
.quarter3 {
bottom: 0;
left: 0;
background-color: orange;
border-radius: 0 0 0 100%;
}
.quarter4 {
bottom: 0;
right: 0;
background-color: green;
border-radius: 0 0 100% 0;
}
.cutout {
width: 50%;
height: 50%;
background-color: white;
position: absolute;
top: 25%;
left: 25%;
border-radius: 50%;
pointer-events: none;
}
<div class="main">
<div class="quarter quarter1"></div>
<div class="quarter quarter2"></div>
<div class="quarter quarter3"></div>
<div class="quarter quarter4"></div>
<div class="cutout"></div>
</div>

Answer 2

Here is an <svg> solution.
Svg has its own <a> element svg.
Just press the corners and you will find some amazing documentation ;)
Jokes aside The a link works on the shape so the shape gets the link.
This leaves the space empty space inside the shape that will show any thing behind it.
<svg width="150px" height="150px" viewbox="-1 -1 102 102">
<a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
<path stroke="tomato" fill="orange" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20
C 31 20 20 31 20 50Z" />
</a>
<a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
<path stroke="darkRed" fill="red" transform="translate(100, 0) rotate(90)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20
C 31 20 20 31 20 50Z" />
</a>
<a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
<path stroke="DarkBlue" fill="blue" transform="translate(100, 100) rotate(180)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20
C 31 20 20 31 20 50Z" />
</a>
<a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
<path stroke="darkGreen" href="#" fill="green" transform="translate(0, 100) rotate(-90)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20
C 31 20 20 31 20 50Z" />
</a>
</svg>

Answer 3

i have been able to enhance the 1st answer and avoid getting the ring respond when mouse is on cutoff area.
http://codepen.io/a-zaki/pen/rLRyAm
/**
* Quarter Circles
*/
.main {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.quarter {
position: absolute;
width: 50%;
height: 50%;
transition: background-color 0.2s ease-in-out;
z-index: 1;
}
.quarter:hover {
background-color: pink;
}
.quarter1 {
top: 0;
left: 0;
background-color: red;
border-radius: 100% 0 0 0;
}
.quarter2 {
top: 0;
right: 0;
background-color: blue;
border-radius: 0 100% 0 0;
}
.quarter3 {
bottom: 0;
left: 0;
background-color: orange;
border-radius: 0 0 0 100%;
}
.quarter4 {
bottom: 0;
right: 0;
background-color: green;
border-radius: 0 0 100% 0;
}
.cutout {
width: 50%;
height: 50%;
background-color: white;
position: absolute;
top: 25%;
left: 25%;
border-radius: 50%;
border: 3px solid #000;
z-index: 2;
}
<div class="main">
<div class="quarter quarter1"></div>
<div class="quarter quarter2"></div>
<div class="quarter quarter3"></div>
<div class="quarter quarter4"></div>
<div class="cutout"></div>
</div>

Answer 4

On Safari this should work:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 40px;
height: 40px;
border: solid;
border-radius: 100px 0 0 0;
border-width: 30px 30px 0;
border-right: hidden;
}
</style>
<title>Quatre Circle Outline</title>
</head>
<body>
<div></div>
</body>
</html>