Question

我试图在css中创建一个环形，分为四个季度。每个季度都代表一个按钮。

我一直在玩下面的代码：

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

产生这一点（忽略灰线）：

enter image description here

显然，我想要将右下角的边框翻转。但是，由于这是一个按钮，我不能使用其他形状来产生剪切（因为这会与菜单的其他按钮重叠）。我添加了一条红线，以显示我想要边框的方式。对不起，我的油漆技巧不好:-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>

Answer 2

这是＆lt; svg＆gt;溶液

Svg有自己的＆lt; a＆gt; element svg。
只需按下角落，你会发现一些惊人的文件;）
旁边的笑话一个链接在形状上起作用，因此形状得到链接这会在空间中留出空白空间，以显示它背后的任何东西。

＆＃13;

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

＆＃13;

Answer 3

我已经能够增强第一个答案，并避免在鼠标处于截止区域时响应响铃。

http://codepen.io/a-zaki/pen/rLRyAm

＆＃13;

/**
* 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;
}

＆＃13;

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

＆＃13;

Answer 4

在 Safari 上这应该可以工作：

<!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>

四分之一的CSS和HTML环

4 个答案:

这是＆lt; svg＆gt;溶液