CODEWITHSUNDEEP
javascriptcsscss-shapes
Shanmugalakshmi
Shanmugalakshmi

Reputation: 267

How to divide a circle into 12 equal parts with color using css3/javascript

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

I want to divide a circle into 12 parts by using lines for innerCircle following below figure. I tried few but not fully. So Please give some idea.

enter image description here

Thanks in advance.

Upvotes: 12

Views: 28382

Answers (4)

Danield
Danield

Reputation: 125513

This can be done using CSS transforms

  1. For 12 equal slices, each slice angle will be 30 degrees.

  2. We need to rotate each slice according to the angle between vertical axis and start of the slice. So the first slice will be rotated by 0deg and the last by 330deg

  3. Additionally we need to skew each slice by minus (90deg - slice angle) In this case, it is -(90deg - 30deg) = skewY(-60deg)

  4. Regarding the text:

a) We need to unskew slice contents with skewY(60deg)

b) In order to center the text in the slice we need to rotate it by half the slice angle, hence: 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 and Safari/iOS require -ms and -webkit vendor prefixes respectively. (caniuse)

Upvotes: 29

Vishesh Mishra
Vishesh Mishra

Reputation: 1108

We can divide the circle into n parts by drawing the line. For this I have taken a outer div as a circle and an inner div as a center. Now to divide the circle into n parts get n points on circle on equal distance and draw lines from that points to center. I am using bootstrap 4 and javascript to do this. You can check below link to get the code. 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 part 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;
}

Upvotes: 0

jbutler483
jbutler483

Reputation: 24559

You could use borders for this (I've made 8 sectors in this since my maths isn't great). But you should be able to get the general idea here:

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

Upvotes: 3

wasikuss
wasikuss

Reputation: 969

Pure css3 is possible. Now 4 parts, still researching more user friendly formula to specify only sizes, parts and colors

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

Upvotes: -1

Related Questions