相关疑难解决方法(0)

如何在CSS中绘制圆形扇区？

好吧,用纯CSS绘制一个圆圈很容易.

.circle {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 3px solid black;
    background-color: green;
}

Run Code Online (Sandbox Code Playgroud)

我如何绘制一个扇区？给定度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 …

Run Code Online (Sandbox Code Playgroud)

css css3 css-shapes

Ita*_*Gal

2017 07-09

70
推荐指数

10
解决办法

7万
查看次数

使用背景颜色的多色圆形div？

我正在尝试在CSS中创建一个多色圈来模拟一个幸运之轮,我尝试过使用线性渐变但它只是应用垂直穿过圆形div的颜色条而不是像被切割一样的彩色区域如果这是有意义的披萨？

这是我试过的代码:

background: -moz-linear-gradient(left, red, red 20%, blue 20%, blue);

Run Code Online (Sandbox Code Playgroud)

结果如下:

但我希望它看起来更像这样？:

这在CSS中是否可行,或者我将不得不使用背景图像(我宁愿避免使用它,因为它不像页面调整大小那样容易扩展等等)？

html css background css3 background-color

EM-*_*ons

2018 02-28

34
推荐指数

6
解决办法

3425
查看次数

CSS Only Pie Chart - 如何在切片之间添加间距/填充？

我已经构建了一个仅限 CSS 的饼图，但我需要在每个切片之间添加空间，就像它是一个边框一样。我试图为每个切片添加一个边框，但这实际上不起作用。

关于如何使这个 CSS 饼图看起来更像下图的任何想法？

这是我的代码：

.palette {
  height: 48px;
  width: 48px;
}
.palette .colorOuter1,
.palette .colorOuter2,
.palette .colorOuter3,
.palette .colorOuter4,
.palette .colorOuter5 {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(0px, 200px, 200px, 100px);
}
.palette .colorOuter1 {
  clip: auto;
  background: #eee;
}
.palette .colorOuter2 {
  transform: rotate(0deg);
}
.palette .colorOuter2 {
  transform: rotate(72deg);
}
.palette .colorOuter3 {
  transform: rotate(144deg);
}
.palette .colorOuter4 {
  transform: rotate(216deg);
}
.palette .colorOuter5 {
  transform: rotate(288deg); …

Run Code Online (Sandbox Code Playgroud)

css pie-chart css-shapes

stw*_*ite

2021 02-04

6
推荐指数

1
解决办法

1631
查看次数