问题描述
好,使用纯CSS绘制圆形很容易。
.circle {
width:100px;
height:100px;
border-radius:100px;
border:3px solid black;
background-color:green;
}
如何画扇形?给定一个度数X [0-360]我想画一个X度扇区。
我可以用纯CSS吗?
例如:
感谢+示例
谢谢Jonathan,我使用第一种方法。如果它帮助某人在这里的一个例子的JQuery函数,获取百分比和绘制一个扇区。扇区在百分比圆圈后面,并且该示例示出了如何从开始度数获得围绕圆的弧。
>
Well, drawing a circle with pure CSS is easy.
.circle{
width: 100px;
height: 100px;
border-radius: 100px;
border: 3px solid black;
background-color: green;
}
How do I draw a sector? Given a degree X [0-360] I want to draw a X degrees sector.Can I do that with pure CSS?
For example:
Thanks + Example
Thank you Jonathan, I used the first method. If it helps someone here's an example of a JQuery function that gets percentage and draw a sector. The sector is behind the percentage circle and this example shows how to achieve an arc around a circle from a start degree.
$(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 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%);
}
Demo: http://jsfiddle.net/jonathansampson/7PtEm/
Scalable Vector Graphics
If it's an option, you can accomplish a similar effect using SVG <circle>
and <path>
elements. Consider the following:
<svg>
<circle cx="115" cy="115" r="110"></circle>
<path d="M115,115 L115,5 A110,110 1 0,1 190,35 z"></path>
</svg>
The above is fairly straight forward. We have an element containing a circle and a path. The circle's center is at 115x115 (making the SVG element 230x230). The circle has a radius of 110, making it a total of 220 wide (leaving a border of 10).
We then add a <path>
element, which is the most complicated portion of this example. This element has one attribute which determines where, and how the path is drawn. It starts with the following value:
M115,115
This instructs the path to start in the center of the aforementioned circle. Next, we draw a line from this location to the next location:
L115,5
This draws a vertical line from the center of the circle up to the top of the element (well, five pixels from the top). It is at this point things get a little more complicated but still very much intelligible.
We now draw an arc from our present location (115,5):
A110,110 1 0,1 190,35 z
This creates our arc and gives it a radius matching that of our circle (110). The two values represent the x-radius and y-radius, and both are equal since we're dealing with a circle. The next set of important numbers are the last, 190,35
. This tells the arc where to complete.
As for the rest of the information (1 0,1
and z
) these control the curvature, direction, and terminal of the arc itself. You can learn more about them by consulting any online SVG path reference.
To accomplish a "slice" of a different size, merely change the 190,35
to reflect a larger or smaller set of coordinates. You may find that you'll need to create a second, arc if you want to span more than 180 degrees.
If you want to determine the x and y coordinates from an angle, you can use the following equations:
x = cx + r * cos(a)
y = cy + r * sin(a)
With the above example, a degree of 76 would be:
x = 115 + 110 * cos(76)
y = 115 + 110 * sin(76)
Which gives us 205.676,177.272
.
With some ease, you can create the following:
Demo: http://jsfiddle.net/jonathansampson/tYaVW/
这篇关于如何在CSS中绘制圆形扇区?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!