四分之一的CSS和HTML环

Question

我试图在css中创建一个环形,分为4个季度.每个季度都代表一个按钮.

我一直在玩以下代码:

#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;
}

产生这个(忽略灰线):

显然,我希望右下角的边框是倒置的.但是,由于这是一个按钮,我不能使用其他形状来产生剪切(因为这会与菜单的其他按钮重叠).我添加了一条红线,以显示我想要边框的方式.对不起,我的油漆技巧不好:-P

如何反转边框或以其他方式产生我想要的形状？

Answer 1

我会这样做:

http://dabblet.com/gist/5476973

简而言之,许多边界半径+一切都在白色圆圈之上.

在我的例子中,我然后使用javascript将点击事件绑定到div上,或者只是将它们全部<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>