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>
Related Topics
Bootstrap 3 - Desktop View on a Mobile Device
How to Vertically Align <Li> Elements in <Ul>
What Does an "&" Before a Pseudo Element in CSS Mean
Svg in Img Element Proportions Not Respected in IE9
Css: Fixed to Bottom and Centered
CSS Transition Auto Height Not Working
Responsive CSS Styles on Mobile Devices Only
Bootstrap 3 Responsive Table with Fixed First Column
Float Right and Position Absolute Doesn't Work Together
@Import in @If Statement in SASS
Add a CSS Class to Single Code Chunks in Rmarkdown
Differencebetween Align-Items VS. Align-Content in Grid Layout