如何使用css3 / javascript将圆圈分成12个相等的部分

时间：2015-03-12 09:39:00

标签： javascript css3 css-shapes

HTML：

<?xml version="1.0" encoding="utf-8"?>
<html>
  <head>
    <title>Circle</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
  </head>
  <body>
    <div class="circle"><p class="innerCircle"></p></div>
  </body>
</html>

CSS：

.circle {
    width: 450px;
    height: 450px;

    border-top: 30px solid #416fa6;
    border-right: 30px solid #718242;
    border-bottom: 30px solid #63ae98;
    border-left: 30px solid #b45447;
    -webkit-border-radius: 300px;
       -moz-border-radius: 300px;
            border-radius: 300px;
}
.innerCircle {
    width: 0px;
    height: 0px;
    border-top: 210px solid #416FA6;
    border-left: 210px solid #B45447;
    border-right: 210px solid #718242;
    border-bottom: 210px solid #FFA500;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
    margin-left: 15px;
    margin-right:0px;
    margin-top: 15px;
    margin-bottom:0px; 
    /* border-radius: 50%;
    background-color: green; */
}

我想通过使用 innerCircle 的行将一个圆分成12个部分，如下图所示。我尝试了很少但不完全。所以请提出一些想法。

enter image description here

提前致谢。

4 个答案:

答案 0 :(得分：19)

这可以使用CSS转换

来完成

1）对于12个相等的切片，每个切片角度将为30度。

2）我们需要根据垂直轴和切片开始之间的角度旋转每个切片。因此第一个切片将旋转0度，最后一个切片旋转330度

3）此外，我们需要将每个切片倾斜减去（90度 - 切片角度）     在这种情况下，它是 - （90deg - 30deg）= skewY(-60deg)

4）关于案文：

a）我们需要使用skewY(60deg)

取消切片内容

b）为了使文本在切片中居中，我们需要将切片角度旋转一半，因此：rotate(15deg)

FIDDLE 

.circle {
  position: relative;
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 20em;
  height: 20em;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}
li {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
}
.text {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  text-align: center;
  transform: skewY(60deg) rotate(15deg);
  padding-top: 20px;
}
li:first-child {
  transform: rotate(0deg) skewY(-60deg);
}
li:nth-child(2) {
  transform: rotate(30deg) skewY(-60deg);
}
li:nth-child(3) {
  transform: rotate(60deg) skewY(-60deg);
}
li:nth-child(4) {
  transform: rotate(90deg) skewY(-60deg);
}
li:nth-child(5) {
  transform: rotate(120deg) skewY(-60deg);
}
li:nth-child(6) {
  transform: rotate(150deg) skewY(-60deg);
}
li:nth-child(7) {
  transform: rotate(180deg) skewY(-60deg);
}
li:nth-child(8) {
  transform: rotate(210deg) skewY(-60deg);
}
li:nth-child(9) {
  transform: rotate(240deg) skewY(-60deg);
}
li:nth-child(10) {
  transform: rotate(270deg) skewY(-60deg);
}
li:nth-child(11) {
  transform: rotate(300deg) skewY(-60deg);
}
li:nth-child(12) {
  transform: rotate(330deg) skewY(-60deg);
}
li:first-child .text {
  background: green;
}
li:nth-child(2) .text {
  background: tomato;
}
li:nth-child(3) .text {
  background: aqua;
}
li:nth-child(4) .text {
  background: yellow;
}
li:nth-child(5) .text {
  background: orange;
}
li:nth-child(6) .text {
  background: purple;
}
li:nth-child(7) .text {
  background: cyan;
}
li:nth-child(8) .text {
  background: brown;
}
li:nth-child(9) .text {
  background: gray;
}
li:nth-child(10) .text {
  background: pink;
}
li:nth-child(11) .text {
  background: maroon;
}
li:nth-child(12) .text {
  background: gold;
}
<ul class="circle">
  <li>
    <div class="text">1</div>
  </li>
  <li>
    <div class="text">2</div>
  </li>
  <li>
    <div class="text">3</div>
  </li>
  <li>
    <div class="text">4</div>
  </li>
  <li>
    <div class="text">5</div>
  </li>
  <li>
    <div class="text">6</div>
  </li>
  <li>
    <div class="text">7</div>
  </li>
  <li>
    <div class="text">8</div>
  </li>
  <li>
    <div class="text">9</div>
  </li>
  <li>
    <div class="text">10</div>
  </li>
  <li>
    <div class="text">11</div>
  </li>
  <li>
    <div class="text">12</div>
  </li>

  <ul>

<强> NB： IE9和Safari / iOS分别需要-ms和-webkit供应商前缀。 （caniuse）

答案 1 :(得分：2)

你可以使用边框（我已经制作了8个扇区，因为我的数学不是很好）。但是你应该能够在这里得到一般的想法：

.circ {
  height: 300px;
  width: 300px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.sect {
  height: 0px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  border-right: 150px solid red;
  border-top: 150px solid transparent;
  transform-origin: bottom left;
}
.sect:nth-child(2) {
  transform: rotate(45deg);
  border-right: 150px solid blue;
}
.sect:nth-child(3) {
  transform: rotate(90deg);
  border-right: 150px solid green;
}
.sect:nth-child(4) {
  transform: rotate(135deg);
  border-right: 150px solid red;
}
.sect:nth-child(5) {
  transform: rotate(180deg);
  border-right: 150px solid blue;
}
.sect:nth-child(6) {
  transform: rotate(225deg);
  border-right: 150px solid green;
}
.sect:nth-child(7) {
  transform: rotate(270deg);
  border-right: 150px solid blue;
}
.sect:nth-child(8) {
  transform: rotate(315deg);
  border-right: 150px solid green;
}
<div class="circ">

  <div class="sect"></div>
  <div class="sect"></div>
  <div class="sect"></div>
  <div class="sect"></div>
  <div class="sect"></div>
  <div class="sect"></div>
  <div class="sect"></div>
  <div class="sect"></div>

</div>

答案 2 :(得分：0)

  

我们可以通过画线将圆分成n个部分。为此，我   以外部div为圆，内部div为中心。现在   将圆分为n个部分，在圆上等于n个点   距离并绘制从该点到中心的线。我在用   引导程序4和javascript来做到这一点。您可以点击下面的链接获取   代码。 https://github.com/visheshmishra/circle_division 

<!DOCTYPE html>
<html>
    <head> 
        <title>Circle division in equal parts</title>
        <meta charset="utf-8">
        <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/index.css"> 
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <div class="container-fluid">
            <div class = "d-flex align-items-center justify-content-center">
                <div class="circle-div d-flex align-items-center justify-content-center" 
                     id="outerCirlceId">
                    <div class="center-div" id="centerDivId">
                    </div>
                </div>
            </div>
        </div>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">

            var cordinateArr = [];
            var x0 ;
            var y0;
            var centerObj = {};
            function getCenter(){
            x0 = document.getElementById("centerDivId").offsetLeft;
            y0 = document.getElementById("centerDivId").offsetTop;
            centerObj.left = x0;
            centerObj.top = y0;
            centerObj.width = 1;
            centerObj.height = 1;
            console.log("center x,y" + x0,y0);
            var items = 12;
            var r1 = 200;
                for(var i = 0; i < items; i++){ 
                    var cordObj = {};   
                    var cordImgObj = {};
                    var x = x0 + r1 * Math.cos(2 * Math.PI * i / items); 
                    var y = y0 + r1 * Math.sin(2 * Math.PI * i / items);

                    cordObj.left = x;
                    cordObj.top = y;
                    cordObj.width = 1;
                    cordObj.height = 1;
                    console.log("x = "+x, "y = "+y);
                    cordinateArr.push(cordObj);
                }
                drawLine();
            }

            function drawLine(){
            var thickness = 2;
            var color = "black";
                while(cordinateArr.length!=0){
                    var off1 = centerObj;
                    var off2 = cordinateArr[0];
                    // bottom right
                    var x1 = off1.left + off1.width;
                    var y1 = off1.top + off1.height;
                    // top right
                    var x2 = off2.left + off2.width;
                    var y2 = off2.top;
                    // distance
                    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
                    // center
                    var cx = ((x1 + x2) / 2) - (length / 2);
                    var cy = ((y1 + y2) / 2) - (thickness / 2);
                    // angle
                    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
                    // make hr
                    var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
                    //
                    //document.body.innerHTML += htmlLine;
                    document.getElementById("outerCirlceId").innerHTML += htmlLine;
                    cordinateArr.splice(0,1);
                }
            }
            getCenter();


        </script>
    </body>
</html>

/ * css部分index.css * / 

.circle-div{
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 3px solid black;
    position: absolute;
    left: 30%;
    top:100px;
    overflow: hidden;
    background:red;
     -webkit-transition: all 5s linear;
    -moz-transition: all 5s linear;
    -o-transition: all 5s linear;
    transition: all 5s linear;
}

答案 3 :(得分：-1)

纯css3是可能的。现在有4个部分，仍在研究更加用户友好的公式，仅指定尺寸，零件和颜色

http://jsfiddle.net/wasikuss/nyyvL9oL/

相关问题
最新问题