如何使用CSS制作圆形扇形?

18
我想使用CSS创建一个圆形扇形。这些扇形将形成一个完整的圆。如何使用CSS创建?我找到了一个示例,但它只是创建了一个四分之一的圆形扇形。我想创建六个圆形扇形来组成一个完整的圆。如何实现呢?注意:我不擅长画图,但这是我想要的样子......
circle devided in sectors

div {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  background-color: #ccc;
  -moz-border-radius: 100px;
  border-radius: 100px;
}
#center {
  position: relative;
  margin: 100px 0 0 100px;
  border: solid #fff 1px;
}
#tl,#tr,#bl,#br {
  position: absolute;
  height: 75px;
  width: 75px;
  z-index: -1;
}
#tl {
  border-radius: 100px 0 0 0;
  -moz-border-radius: 100px 0 0 0;
  top: -50px;
  left: -50px;
}
#tr {
  border-radius: 0 100px 0 0;
  -moz-border-radius: 0 100px 0 0;
  top: -50px;
  left: 26px;
}
#bl {
  border-radius: 0 0 0 100px;
  -moz-border-radius: 0 0 0 100px;
  top: 26px;
  left: -50px;
}
#br {
  border-radius: 0 0 100px 0;
  -moz-border-radius: 0 0 100px 0;
  top: 26px;
  left: 26px;
}
<div id="center">
  <div id="tl"></div>
  <div id="tr"></div>
  <div id="bl"></div>
  <div id="br"></div>
</div>


2
http://nedbatchelder.com/blog/200805/css_homer_animated.html 或者如果您认为JS也可以在这里是:http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm - doniyor
1
请访问以下链接以查看与3D边框相关的编程示例:http://www.designdetector.com/tips/3DBorderDemo2.html - doniyor
1
@doniyor,这不是我想要的形状!我不想要圆形,我想要圆形扇区。 - palAlaa
18
谢谢夸奖你的绘画技巧,我给你点个赞。 - Roko C. Buljan
2
这将是SVG的一个很好的使用案例。 - feeela
显示剩余5条评论
3个回答

15

我已经完成了菜单:Circular menu v6 - jsFiddle

这个菜单没有涉及到JavaScript,全部使用纯CSS完成!

这是代码:

#menu {
  background: #aaa;
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
}

#center {
  position: absolute;
  left: 70px;
  top: 70px;
  width: 60px;
  height: 60px;
  z-index: 10;
  background: #eee;
  background: linear-gradient(top, #eee, #aaa);
  background: -moz-linear-gradient(top, #eee, #aaa);
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
}

#center a {
  display: block;
  width: 100%;
  height: 100%
}

.item {
  background: #aaa;
  overflow: hidden;
  position: absolute;
  width: 100px;
  height: 100px;
  transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transition: background .5s;
  -moz-transition: background .5s;
  -webkit-transition: background .5s;
  -o-transition: background .5s;
  -ms-transition: background .5s;
}

.item:hover {
  background: #eee
}

.item1 {
  z-index: 1;
  transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
}

.item2 {
  z-index: 2;
  transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
}

.item3 {
  z-index: 3;
  transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.item4 {
  z-index: 4;
  transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -webkit-transform: rotate(240deg);
}

.item5 {
  z-index: 5;
  transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -webkit-transform: rotate(300deg);
}

.item6 {
  border: none;
  position: absolute;
  z-index: 6;
  transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
}

#wrapper6 {
  position: absolute;
  width: 100px;
  height: 100px;
  overflow: hidden;
  transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
}

.item1 .content {
  left: -10px;
  top: 15px;
  transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
}

.item2 .content {
  left: -11px;
  top: 16px;
  transform: rotate(-120deg);
  -moz-transform: rotate(-120deg);
  -webkit-transform: rotate(-120deg);
}

.item3 .content {
  left: -7px;
  top: 12px;
  transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
}

.item4 .content {
  left: -5px;
  top: 18px;
  transform: rotate(-240deg);
  -moz-transform: rotate(-240deg);
  -webkit-transform: rotate(-240deg);
}

.item5 .content {
  left: -10px;
  top: 20px;
  transform: rotate(-300deg);
  -moz-transform: rotate(-300deg);
  -webkit-transform: rotate(-300deg);
}

.item6 .content {
  left: 20px;
  top: -10px;
  transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
}

.content,
.content a {
  width: 100%;
  height: 100%;
  text-align: center
}

.content {
  position: absolute;
}

.content a {
  line-height: 100px;
  display: block;
  position: absolute;
  text-decoration: none;
  font-family: 'Segoe UI', Arial, Verdana, sans-serif;
  font-size: 20px;
  text-shadow: 1px 1px #eee;
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff
}

.display-target {
  display: none;
  text-align: center;
  opacity: 0;
}

.display-target:target {
  display: block;
  opacity: 1;
  animation: fade-in 1s;
  -moz-animation: fade-in 1s;
  -webkit-animation: fade-in 1s;
  -o-animation: fade-in 1s;
  -ms-animation: fade-in 1s;
}

@keyframes fade-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-moz-keyframes fade-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-o-keyframes fade-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-ms-keyframes fade-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
<div id="menu">
  <div class="item1 item">
    <div class="content"><a href="#one">one</a></div>
  </div>
  <div class="item2 item">
    <div class="content"><a href="#two">two</a></div>
  </div>
  <div class="item3 item">
    <div class="content"><a href="#three">three</a></div>
  </div>
  <div class="item4 item">
    <div class="content"><a href="#four">four</a></div>
  </div>
  <div class="item5 item">
    <div class="content"><a href="#five">five</a></div>
  </div>
  <div id="wrapper6">
    <div class="item6 item">
      <div class="content"><a href="#six">six</a></div>
    </div>
  </div>
  <div id="center">
    <a href="#"></a>
  </div>
</div>
<div id="one" class="display-target">Welcome!
  <br />This changing effect is done by ...</div>
<div id="two" class="display-target">... having <code>&lt;div&gt;</code>s with <code>id</code>s ... </div>
<div id="three" class="display-target">... that have the style <code>display: none</code> and the style
  <pre style="text-align: left">:target {
    display: block;
}</pre>so that these messages appear when there is a hash tag like <code>#three</code> (look at the address bar!)</div>
<div id="four" class="display-target">Look at the source of this page ...</div>
<div id="five" class="display-target">... to see how the circular menu works.</div>
<div id="six" class="display-target">By Shaquin Trifonoff</div>
<p><a href="http://stackoverflow.com/users/1421049/shaquin-trifonoff" title="My profile on Stack Overflow">By Shaquin Trifonoff</a></p>


1
+1 我喜欢这个用 CSS 实现的答案,包括淡入淡出动画。干杯! - arttronics
1
@arttronics 感谢您将它放在 jsFiddle 上!我忘记了! - uınbɐɥs
1
@arttronics - 我已经在编辑中链接到了一个Fiddle,并在菜单上使用:target进行了链接,这就是它在我的网站上的样子。 - uınbɐɥs
小提琴似乎在“.item”类上缺少“border-radius: 100px 0 0 0;”,否则在Chrome中周长不是圆形的。 - Jeemusu
2
@Jeemusu - 谢谢你,看起来这是一个仅限于Chrome的bug(它不会在#menu上监听overflow: hidden,但在Firefox上运行良好),我已经在这里制作了一个fiddle(http://jsfiddle.net/LMPcB/4/)使用了`border-radius`和`-webkit-border-radius`,因为我不知道这个bug有多久了。(这可能是由于`transform`引起的,Firefox与`transform`而不是`overflow`有一个`z-index` bug)。 - uınbɐɥs

5

将简单的圆分成6个扇形

使用伪元素上的边框制作三角形:

演示

输出:

CSS circle seperated in 6 sectors

.circle {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
}

.circle:before,
.circle:after,
.circle > div:before,
.circle > div:after {
  content: '';
  position: absolute;
  z-index: -1;
}

.circle:before {
  bottom: 50%;
  left: 50%;
  margin-left: 2px;
  margin-bottom: 2px;
  border-top: 300px solid transparent;
  border-right: 150px solid gold;
}

.circle:after {
  top: 50%;
  left: 50%;
  margin-left: 2px;
  margin-top: 2px;
  border-right: 150px solid gold;
  border-bottom: 300px solid transparent;
}

.sector1:before {
  bottom: 50%;
  right: 50%;
  margin-right: 2px;
  margin-bottom: 2px;
  border-top: 300px solid transparent;
  border-left: 150px solid gold;
}

.sector1:after {
  bottom: 50%;
  margin-bottom: 5px;
  border-top: 300px solid gold;
  border-right: 150px solid transparent;
  border-left: 150px solid transparent;
}

.sector2:before {
  top: 50%;
  right: 50%;
  margin-right: 2px;
  margin-top: 2px;
  border-bottom: 300px solid transparent;
  border-left: 150px solid gold;
}

.sector2:after {
  top: 50%;
  margin-top: 5px;
  border-right: 150px solid transparent;
  border-bottom: 300px solid gold;
  border-left: 150px solid transparent;
}

.round-middle {
  position: absolute;
  top: 96px;
  left: 96px;
  width: 100px;
  height: 100px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: gold;
}
<div class="circle">
  <div class="sector1"></div>
  <div class="sector2"></div>
  <div class="round-middle"></div>
</div>


2

可以使用 -moz-transform 来完成,试试这个 fiddle。实际上,我们不需要 .sec1.sec_.sec4.sec_。然后 .sec5.sec_ 就是 .sec6

#container {
  margin: 50px 0 0 50px;
  position: relative;
}

#center {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  -moz-border-radius: 100px;
  border-radius: 100px;
  position: relative;
  margin: 50px 0 0 0px;
  border: solid #fff 1px;
  z-index: 1000;
}

.outer_sec {
  width: 75px;
  height: 75px;
  overflow: hidden;
  position: absolute;
  left: -50px;
  top: 25px;
}

.sec {
  position: absolute;
  height: 75px;
  width: 75px;
  z-index: 1;
  border-radius: 100px 0 0 0;
  -moz-border-radius: 100px 0 0 0;
  top: -50px;
  left: -50px;
  -moz-transform-origin: 100% 100%;
  cursor: pointer;
}

.sec1.sec {
  -moz-transform: rotate(0deg);
  z-index: 1;
  background-color: #cc1;
}

.sec2.sec {
  -moz-transform: rotate(60deg);
  z-index: 2;
  background-color: #cb2;
}

.sec3.sec {
  -moz-transform: rotate(120deg);
  z-index: 3;
  background-color: #ca3;
}

.sec4.sec {
  -moz-transform: rotate(180deg);
  z-index: 4;
  background-color: #c94;
}

.sec5.sec {
  -moz-transform: rotate(240deg);
  z-index: 5;
  background-color: #c85;
}

.sec6.sec {
  -moz-transform: rotate(300deg);
  z-index: 6;
  margin: 0px 0px 0px 50px;
  background-color: #c76;
  top: -74px;
}

.sec:hover {
  background-color: #06c;
}
<div id="container">
  <div class="sec1 sec"></div>
  <div class="sec2 sec"></div>
  <div class="sec3 sec"></div>
  <div class="sec4 sec"></div>
  <div class="sec5 sec"></div>
  <div class="outer_sec">
    <div class="sec6 sec"></div>
  </div>
  <div id="center"></div>
</div>


我已经更新了这个fiddle。太遗憾,:hover仍然无法工作。 - raymondralibi
1
我已经弄清楚了,问题在于它的z-index。我已经再次更新了fiddle - raymondralibi
2
很遗憾,这个例子不允许在每个扇区内呈现文本,严重限制了它的使用。 - arttronics
1
它肯定允许文本。在每个区块内放置一个 div 并使用 CSS 设置位置。此示例不使用文本,因为我们不知道问题想要什么,例如对齐、方向、大小等。 - raymondralibi
1
@raymondralibi,这是一个公正的陈述。但考虑到其他答案中有text(例如允许文本链接标签),标准已经被提高到了更高的水平。当然,我昨天已经给你点赞了。干杯! - arttronics
显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接