Mythio Mythio - 1 month ago 5
CSS Question

Quarter of a ring with CSS and HTML

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):

enter image description here

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

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>

Comments