如何在CSS中绘制一个圆圈？
那么，用纯CSS绘制一个圆圈很容易。
.circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } 我如何画一个部门？ 给定X度[0-360]我想画一个X度的部分。 我可以用纯CSS做到这一点吗？
例如：
谢谢+例子
谢谢乔纳森，我用了第一种方法。 如果这有助于某人获得百分比并绘制一个扇区的JQuery函数的示例。 该部门在百分比圆圈后面，这个例子展示了如何从一个起点开始围绕一个圆弧来实现一个圆弧。
$(function drawSector() { var activeBorder = $("#activeBorder"); var prec = activeBorder.children().children().text(); if (prec > 100) prec = 100; var deg = prec * 3.6; if (deg <= 180) { activeBorder.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)'); } else { activeBorder.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)'); } var startDeg = $("#startDeg").attr("class"); activeBorder.css('transform', 'rotate(' + startDeg + 'deg)'); $("#circle").css('transform', 'rotate(' + (-startDeg) + 'deg)'); });
.container { width: 110px; height: 110px; margin: 100px auto; } .prec { top: 30px; position: relative; font-size: 30px; } .prec:after { content: '%'; } .circle { position: relative; top: 5px; left: 5px; text-align: center; width: 100px; height: 100px; border-radius: 100%; background-color: #E6F4F7; } .active-border { position: relative; text-align: center; width: 110px; height: 110px; border-radius: 100%; background-color: #39B4CC; background-image: linear-gradient(91deg, transparent 50%, #A2ECFB 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="container"> <div id="activeBorder" class="active-border"> <div id="circle" class="circle"> <span class="prec">66</span> <span id="startDeg" class="90"></span> </div> </div> </div>
JSFiddle演示
$(function drawSector() { // Get degrees ... // Draw a sector if (deg <= 180) { activeBorder.css('background-image', 'linear-gradient(' + (90+deg) + 'deg, transparent 50%, #A2ECFB 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%)'); } else { activeBorder.css('background-image', 'linear-gradient(' + (deg-90) + 'deg, transparent 50%, #39B4CC 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%)'); } // Rotate to meet the start degree activeBorder.css('transform','rotate(' + startDeg + 'deg)'); });
CSS和多个背景渐变
而不是试图画出绿色的部分，你可以画白色的部分：
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>
这是非常有可能使用overflow和transform属性，而不需要做复杂的计算。
>旋转变换
对于小于180度的angular度
-
添加宽高比为2：1的元素并
overflow: hidden; -
添加一个与元素的高度和底部半径相同的顶部边框半径为0的伪元素。
-
把
transform-origin: 50% 100%;这将从中间底部转换伪元素。 -
转换：rotate（）; 伪元素通过补充所需的angular度，
即 ，transform: rotate(180 - rqrd. angle);
看看它怎么运作 ：
EG：
使用这种方法的40deg扇区： 小提琴
div { ... overflow: hidden; ... } div:before { ... border-radius: 100px 100px 0 0; transform-origin: 50% 100%; transform: rotate(140deg); ... }
div { height: 100px; width: 200px; overflow: hidden; position: relative; } div:before { height: inherit; width: inherit; position: absolute; content: ""; border-radius: 100px 100px 0 0; background-color: crimson; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); -ms-transform: rotate(140deg); transform: rotate(140deg); }
<div></div>
这有帮助吗？
.circle { width: 16em; height: 16em; border-radius: 50%; background: linear-gradient(36deg, #272b66 42.34%, transparent 42.34%) 0 0; background-repeat: no-repeat; background-size: 50% 50%; }
<div class="circle"></div>
因为我没有find任何令人满意的答案，我不得不跪下，使用clip-path函数和整个css星期天终于得到我想要的。
你可以select一个开始和结束angular度，然后元素将很好地绘制，没有别的。 你将只需要绘制基圆的边界半径解决scheme。
我的解决scheme与四个多边形网格一起工作，每个网格为0-90°的值提供一个可能的起点或终点。 0-100％，90-180°。 0-100％等，共享中心点，因此，有两个4段。 你可以把机构想象成一个多段的望远镜杆，由于机械原理，每个节段都从0到N分段工作，同时仍然保持代码的一些清晰度（0-90,90-180 ..），我不得不手动旋转（-45deg）div，以便0°== 12“。
这里是一个小小的素描，可以说明我是如何做到的：
请注意，您不能将其用于任何商业目的，因为我没有find像在线那样的解决scheme，因此，需要有一些价值。 请尊重这一点。
使用css von c绘制圆形段 schaefer ist lizenziert unter einer Creative Commons Namensnennung – Nicht kommerziell – Keine Bearbeitungen 4.0国际Lizenz。
<script src="jquery-latest.js"></script> <style type="text/css"> .circle{ position: absolute; top: 100px; width: 600px; height: 600px; border-radius: 50%; background-color: #FFFF00; opacity: .9; -webkit-transform: rotate(45deg);
}
<script type="text/javaScript"> var obj; var start, end; function rangeStart(val) { obj = $("body").find(".circle"); start = val; setAngle(obj, start, end); } function rangeEnd(val) { obj = $("body").find(".circle"); end = val; setAngle(obj, start, end); } function applyMasking(obj) { obj.css("-webkit-clip-path", ptsToString()); } // not working for degree start to be lower than end, hence, we set the interface to automatically adapt to that exception: /* function checkForRangeExceptions() { if(end < start) { $("body").find("input[name='rangeLower']").val($("body").find("input[name='rangeUpper']").val()); $("body").find("input[name='rangeLower']").slider('refresh'); } } */ // setInterval(doit, 200); var angie = 0; function doit() { obj = $("body").find(".circle"); if(angie < 360) angie+=15; else angie = 0; setAngle(obj, 0, angie); } function ptsToString() { var str = ""; str+="polygon("; for(var i=0; i < pts.length; i++) { str+=pts[i].x+"% "; if(i != pts.length-1) str+=pts[i].y+"% ,"; else str+=pts[i].y+"%"; } str+=")"; return str; } /* gets passed an html element and sets its clip-path according to the passed angle, starting at 0°; note that from a clock perspective, we start at +45° and hence have to add that value to passed angles later on: */ var pts = [ {x: 50, y: 50}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0} ]; var lb, ub; var sa, ea; function setAngle(obj, start, end) { // if no start, set 0° as default: start = (start == undefined ? start = 0 : start); // find out upper and lower sector bounds: lb = (angleToSector(start) * 2) - 1; ub = angleToSector(end) * 2; // find start end end angles: sa = mapAngleToPoint(start); ea = mapAngleToPoint(end); // now set points except start point which is 0: for(var i=1; i < pts.length; i++) { // set all below lb to lb: if(i <= lb) { pts[i].x = sa.x; pts[i].y = sa.y; } // set all in between to max values: else if(i > lb && i < ub) { pts[i] = setMax(i); } // set all above ub to ub: else if(i >= ub) { pts[i].x = ea.x; pts[i].y = ea.y; } } // apply masking: applyMasking(obj); } // assuming that 100 need to map 90°: function angleToPerc(angle) { return angle * (100/90); } function lowerBound(angle) { return (mapAngleToSector(angle)); } function uppperBound(angle){ return (mapAngleToSector(angle)); } // sectors 1-4 function angleToSector(angle) { if (angle >= 0 && angle < 90) return 1; else if (angle >= 90 && angle < 180) return 2; else if (angle >= 180 && angle < 270) return 3; else if (angle >= 270 && angle <= 360) return 4; } // this maps the passed angle to a coordinate value: var as; function mapAngleToPoint(angle) { var pt = {x: 0, y: 0}; as = angleToSector(angle); if(as == 1) {pt.x = angleToPerc(angle); pt.y = 0; } else if(as == 2) {pt.x = 100; pt.y = angleToPerc(angle-90)} else if(as == 3) {pt.x = 100-angleToPerc(angle-180); pt.y = 100; } else if(as == 4) {pt.x = 0; pt.y = 100-angleToPerc(angle-270); } return pt; } // set a point to its max by index: function setMax(index) { var pt = {x: 0, y: 0}; if (index == 1 || index == 2) { pt.x = 100; pt.y = 0; } else if (index == 3 || index == 4) { pt.x = 100; pt.y = 100; } else if (index == 5 || index == 6) { pt.x = 0; pt.y = 100; } else if (index == 7 || index == 8) { pt.x = 0; pt.y = 0; } return pt; } </script> </head> <body> <div class="circle"> </div> <input type="range" name="rangeLower" value="0" min="0" max="360" onchange="rangeStart(this.value);"> <input type="range" name="rangeUpper" value="66"min="0" max="360" onchange="rangeEnd(this.value);"> </body>
我有另一个解决scheme。
#pie { position: relative; width: 100px; height: 100px; background-color: #76dd76; border-radius: 50%; border: 1px solid #76dd76; } #pie:before, #pie:after { position: absolute; content: ""; display: block; width: 50%; height: 50%; -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; background-color: white; border-top-left-radius: 100%; } #pie:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
<div id="pie"></div>
看到这个了解如何解决你的问题。
<div class="circle"></div> .circle{ width: 100px; height: 100px; background-color: green; border-radius: 100px; position: relative; } .circle:before, .circle:after { border: 50px solid white; border-color: transparent transparent white white; border-radius: 100px; content: ''; height: 0; position: absolute; top: 0; left: 0; width: 0; /* this is to have it white from 180 to 360 degrees on the left side */ transform:rotate(45deg); -ms-transform:rotate(45deg); /* IE 9 */ -webkit-transform:rotate(45deg); /* Safari and Chrome */ } /* the green sector is now 180 minus 45 plus 0 degree */ .circle:after { transform:rotate(0deg); -ms-transform:rotate(0deg); /* IE 9 */ -webkit-transform:rotate(0deg); /* Safari and Chrome */ } /* the green sector is now 180 minus 45 plus -75 degree */ /*.circle:after { transform:rotate(-75deg); -ms-transform:rotate(-75deg); -webkit-transform:rotate(-75deg); }*/
演示
- 你需要画一个圆圈
- 使用
clip-path切割一个部门（你需要做一些math）
你可以在这里玩clip-path
这里是一个演示：
#skills { position: relative; width: 300px; height: 300px; margin: 30px auto; } .circle { width: 100%; height: 100%; border-radius: 50%; position: absolute; } .animate { -webkit-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); -moz-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); -o-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); } .animate:hover { transform: scale(1.1); transform-origin: center center; } #part1 { background-color: #E64C65; -webkit-clip-path: polygon(50% 0, 50% 50%, 100% 41.2%, 100% 0); clip-path: polygon(50% 0, 50% 50%, 100% 41.2%, 100% 0); } #part2 { background-color: #11A8AB; -webkit-clip-path: polygon(50% 50%, 100% 41.2%, 100% 100%, 63.4% 100%); clip-path: polygon(50% 50%, 100% 41.2%, 100% 100%, 63.4% 100%); } #part3 { background-color: #4FC4F6; -webkit-clip-path: polygon(50% 50%, 36.6% 100%, 63.4% 100%); clip-path: polygon(50% 50%, 36.6% 100%, 63.4% 100%); } #part4 { background-color: #FFED0D; -webkit-clip-path: polygon(50% 50%, 0 100%, 36.6% 100%); clip-path: polygon(50% 50%, 0 100%, 36.6% 100%); } #part5 { background-color: #F46FDA; -webkit-clip-path: polygon(50% 50%, 0 36.6%, 0 100%); clip-path: polygon(50% 50%, 0 36.6%, 0 100%); } #part6 { background-color: #15BFCC; -webkit-clip-path: polygon(50% 50%, 0 36.6%, 0 0, 50% 0); clip-path: polygon(50% 50%, 0 36.6%, 0 0, 50% 0); }
<div id="skills"> <div id="part1" class="circle animate"></div> <div id="part2" class="circle animate"></div> <div id="part3" class="circle animate"></div> <div id="part4" class="circle animate"></div> <div id="part5" class="circle animate"></div> <div id="part6" class="circle animate"></div> </div>
这里的所有答案都很有创意。 人们在如此多的方面解决同样的问题真是太神奇了。 Sampson接受的答案真的很酷，但我不知道他为什么决定画白色的部分，而不是绿色，所以我想共享一个修改后的版本，实际上是绿色的。 我只是觉得这种方式更直接，所以我分享它，以防其他人觉得它有用。
pie { width: 5em; height: 5em; display: block; border-radius: 50%; border: 2px solid green; float: left; margin: 1em; } .ten { background-image: linear-gradient(-54deg, white 50%, transparent 50%), linear-gradient(-90deg, green 50%, transparent 50%); } .twentyfive { background-image: linear-gradient(0deg, white 50%, transparent 50%), linear-gradient(-90deg, green 50%, transparent 50%); } .fifty { background-image: linear-gradient(-90deg, green 50%, transparent 50%); } /* Slices greater than 50% require first gradient to be green -> transparent */ .seventyfive { background-image: linear-gradient(0deg, green 50%, transparent 50%), linear-gradient(-90deg, green 50%, transparent 50%); } .onehundred { background-color: green; }
<pie class="ten"></pie> <pie class="twentyfive"></pie> <pie class="fifty"></pie> <pie class="seventyfive"></pie> <pie class="onehundred"></pie>
由于我需要这个dynamic，这里有一个小的jQuery插件。 例如调用$('selector').pieChart(0.4, 'white' 'green')在白色圆圈上显示40％的绿色部分。
// LIBRARY FUNCTION $.fn.pieChart = function(proportion, bg, fg) { var angle, grads; angle = Math.round(360 * (proportion % 0.5) - 90); grads = [ "linear-gradient(" + angle + "deg, " + (proportion < 0.5 ? bg : fg) + " 50%, transparent 50% )", "linear-gradient(-90deg, " + fg + " 50%, transparent 50%)" ]; return $(this).css({ 'background-color': proportion==1 ? fg : bg, 'background-image': grads.join(','), 'border': '1px solid '+fg }); }; // DEMO for (var i=0; i <= 10; i++) { $('<div class="pie" />').appendTo('body').pieChart(i/10, 'white', 'green'); }
.pie { display: inline-block; margin: 10px; border-radius: 50%; width: 100px; height: 100px; }
<script src="jquery-3.0.0.js"></script>
简单。 只需按照下面的代码：
HTML：
<div class="circle"></div> <div class="pie"></div>
CSS：
.circle { width: 11em; height: 11em; border-radius: 100%; background: linear-gradient(360deg, #FFFFFF 100%, transparent 42.34%) 0 0; background-repeat: no-repeat; background-size: 100% 100%; } .pie { width: 11em; height: 11em; border-radius: 100%; background: linear-gradient(-80deg, #1BB90D 50%, transparent 40%) 0 0; background-repeat: no-repeat; background-size: 100% 55%; position: relative; margin-top: -176px; border: 1px solid #808D1E; }
我有一个稍微不同的方法，可以很容易地animation而不使用SVG。
它使用非常具体的宽度，高度和边框宽度以及矩形裁剪，因此需要在需要更改尺寸时仔细处理。 这里要注意的最重要的一点是，如果要调整饼图的大小 ，则需要更新所有的值PROPORTIONATELY – 意味着它们必须全部按相同的因子进行缩放。
请注意，如果馅饼超过50％满（> 180度着色），则需要添加完整的半圆。 这部分应该在JSdynamic处理，如果你animation。
这里是演示的小提琴 – 这比写作解释要简单得多：
animationJSFiddle演示
