Segments in a Circle Using CSS3

Segments in a circle using CSS3

Yes, you can get such slices of custom angles using either one of the following two methods:

If you don't need the slices to be elements themselves, the you can simply do it with one element and linear gradients - see this rainbow wheel I did last month.
If you need the slices to be elements themselves, then you can do it by chaining rotate and skew transforms - see this circular menu I did a while ago.

For #2, see also this very much simplified example I did right now.

.pie {
  overflow:hidden;
  position: relative;
  margin: 1em auto;
  border: dashed 1px;
  padding: 0;
  width: 32em; height: 32em;
  border-radius: 50%;
  list-style: none;
}
.slice {
  overflow: hidden;
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 50%;
  transform-origin: 0% 100%; 
}
.slice:first-child {
  transform: rotate(15deg) skewY(-22.5deg);
}
.slice-contents {
  position: absolute;
  left: -100%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: lightblue;
}
.slice:first-child .slice-contents {
  transform: skewY(22.5deg); /* unskew slice contents */
}
.slice:hover .slice-contents { background: violet; } /* highlight on hover */

<ul class='pie'>
  <li class='slice'>
    <div class='slice-contents'></div>
  </li>
  <!-- you can add more slices here -->
</ul>

Circular segment using CSS/CSS3

The width and height of the div should be same to produce a circle.

eg: http://jsfiddle.net/wGzMd/

Here is the css:

div{
position: absolute;
top: 50px;
left: 50px;
width:100px;
height:100px;
border: 1px solid green;
background: green;
border-radius: 360px;
}

EDIT (for segment):

http://jsfiddle.net/wGzMd/3/

CSS:

div.outerClass{
 position: absolute;
 left: 50px;
 top: 50px;
 height: 25px;
 overflow: hidden;
}

div.innerClass{
 width:100px;
 height:100px;
 border: 1px solid green;
 border-radius: 360px;
}

HTML:

<div class="outerClass"><div class="innerClass"></div></div>

How To Create Segments In A Circle Using HTML5 & CSS3

As you are going to be dealing with possibly complex angles, I would recommend that you use a canvas. Here is an example of how you can achieve what you are looking for:

//Getting the context for the canvasvar canvas = document.getElementById('fraction');var context = canvas.getContext('2d');
var x = 80; // X coordinate for the position of the segmentvar y = 80; // Y coordinate for the position of the segmentvar radius = 75; // Radius of the circle
// This is what you will be changing// Maybe get these values from a function that pulls the numbers from an input boxvar numerator = 1;var denominator = 4;var fraction = numerator / denominator; // The angle that will be drawn
// For plotting the segmentsvar startAngle = Math.PI;var endAngle = (1 + (2 * fraction)) * startAngle;
// If the circle is draw clockwise or anti-clockwise// Setting this to true will draw the inverse of the anglevar drawClockwise = false;
// Drawing the segmentcontext.beginPath();context.arc(x, y, radius, startAngle, endAngle, drawClockwise);context.lineTo(x, y);context.closePath();context.fillStyle = 'yellow';context.fill();
//***************** Edit *******************
// This will add the circle outline around the segmentcontext.beginPath();context.arc(x, y, radius, 0, Math.PI * 2, drawClockwise);context.closePath();context.strokeStyle = '#000';context.stroke();

<div>  <canvas id="fraction" width="200" height="200"></canvas></div>

How to segment a circle with different colors using CSS

The cross-browser solution:

JSFiddle

.circle {    border-radius: 50%;    background: gray;    width: 300px;    height: 300px;    overflow: hidden;}.segment {    float: left;    width: 10%;    height: 100%;}    .segment_1 {        background: red;    }    .segment_2 {        background: green;    }    .segment_3 {        background: yellow;    }    .segment_4 {        background: blue;    }

<div class="circle">    <div class="segment segment_1"></div>    <div class="segment segment_2"></div>    <div class="segment segment_3"></div>    <div class="segment segment_4"></div></div>

How to draw a circle sector in CSS?

CSS and Multiple Background Gradients

Rather than trying to draw the green portion, you could draw the white portions instead:

pie {
    border-radius: 50%;
    background-color: green;
}

.ten {
    background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

pie {
  width: 5em;
  height: 5em;
  display: block;
  border-radius: 50%;
  background-color: green;
  border: 2px solid green;
  float: left;
  margin: 1em;
}

.ten {
  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.twentyfive {
  background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.fifty {
  background-image: linear-gradient(90deg, white 50%, transparent 50%);
}


/* Slices greater than 50% require first gradient
   to be transparent -> green */

.seventyfive {
  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.onehundred {
  background-image: none;
}

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

Divide a circle into 24 segments using css

You can perform it more easily by using Scalable Vector Graphics.

code to draw circle:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="150" cy="100" r="50" stroke="blue" stroke-width="2" fill="white"/>
</svg>

You may draw different lines, so that you can divide the circle into segments.

Code for line:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

Segments in a Circle Using CSS3