如何使用 css3/javascript 将一个圆圈分成 12 个带颜色的相等部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29006214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to divide a circle into 12 equal parts with color using css3/javascript
提问by Shanmugalakshmi
HTML:
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:
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 innerCirclefollowing below figure. I tried few but not fully. So Please give some idea.
我想通过使用线来分割圆分成12份innerCircle按照下面图。我尝试了很少但不完全。所以请给出一些想法。
Thanks in advance.
提前致谢。
回答by Danield
This can be done using CSS transforms
这可以使用 CSS 转换来完成
1) For 12 equal slices, each slice angle will be 30 degrees.
1) 对于 12 个相等的切片，每个切片角度将为 30 度。
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
2）我们需要根据垂直轴和切片起点之间的角度旋转每个切片。所以第一个切片将旋转 0deg，最后一个切片将旋转 330deg
3) Additionally we need to skew each slice by minus (90deg - slice angle)
In this case, it is -(90deg - 30deg) = skewY(-60deg)
3) 另外，我们需要将每个切片倾斜负 (90deg - slice angle) 在这种情况下，它是 -(90deg - 30deg) = skewY(-60deg)
4) Regarding the text:
4）关于文字：
a) We need to unskew slice contents with skewY(60deg)
a) 我们需要用 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)
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 and Safari/iOS require -ms and -webkit vendor prefixes respectively. (caniuse)
注意：IE9 和 Safari/iOS 分别需要 -ms 和 -webkit 供应商前缀。( caniuse)
回答by jbutler483
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:
您可以为此使用边框（因为我的数学不是很好，所以我已经在其中制作了 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>回答by Vishesh Mishra
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
我们可以通过画线将圆分成n个部分。为此，我将一个外部 div 作为一个圆圈，一个内部 div 作为中心。现在将圆分成 n 个部分，在圆上等距取 n 个点，并从该点到中心画线。我正在使用 bootstrap 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 part index.css */
/*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;
}
回答by wasikuss
Pure css3is possible. Now 4 parts, still researching more user friendly formula to specify only sizes, parts and colors
纯css3是可能的。现在 4 部分，仍在研究更用户友好的公式以仅指定尺寸、部分和颜色
