如何使用CSS制作圆形扇区 [英] How can I make a circular sector using CSS

问题描述

我想使用CSS制作圆形扇区。扇区将形成一个完整的圆。如何使用CSS？

我发现了一个。

此菜单中没有涉及JavaScript。这是在纯CSS！

这是代码：

 <！DOCTYPE HTML> 
< html lang =en-US> 
< head> 
< meta charset =UTF-8/> 
< title> Circular Menu v6< / title> 
< style type =text / 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 
} 
 @keyframes fade-in {
 from {opacity：0} 
到{opacity：1} 
} 
 @ -moz-keyframes fade-in {
从{opacity：0} 
到{opacity：1} 
} 
 @ -webkit-keyframes fade-in {
 from {opacity：0} 
 to {opacity：1} 
} 
 @ -o-keyframes淡入{
从{opacity：0} 
到{opacity：1} 
} 
 @ -ms-keyframes fade-in {
 from {opacity： 0} 
 to {opacity：1} 
} 
< / style> 
< / head> 
< body> 
< div id =menu> 
< div class =item1 item> 
< div class =content>< a href =＃one>一个< / a>< / div> 
< / div> 
< div class =item2 item> 
< div class =content>< a href =＃two>两个< / a>< / div> 
< / div> 
< div class =item3 item> 
< div class =content>< a href =＃three>三< / a>< / div> 
< / div> 
< div class =item4 item> 
< div class =content>< a href =＃four>四< / a>< / div> 
< / div> 
< div class =item5 item> 
< div class =content>< a href =＃five>五< / a>< / div> 
< / div> 
< div id =wrapper6> 
< div class =item6 item> 
< div class =content>< a href =＃six>六< / a>< / div> 
< / div> 
< / div> 
< div id =center> 
< a href =＃>< / a> 
< / div> 
< / div> 
< / body> 
< / html> 
  

I want to make a circular sector using CSS. The sectors will form a complete circle. How can I make it using CSS?

I found a sample, but it makes a quarter circular sector. I want to make six circular sectors that make a complete circle. How can I make it?

Note: I am not good at drawing, but here's a sample of what I want...

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>

解决方案

I have finished the menu: Circular menu v6 - jsFiddle.

There is no JavaScript involved in this menu. It's done in pure CSS!

Here is the code:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <title>Circular Menu v6</title>
    <style type="text/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
}
@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 }
}
    </style>
</head>
<body>
    <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>
</body>
</html>

这篇关于如何使用CSS制作圆形扇区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！