CSS / SVG创建螺旋

Question

我正在寻找一种在CSS中创建“螺旋”的方法。

这是一张图片，让我更加清楚我想要实现的目标：

  

所以一个部分圆圈的轮廓越来越大。

• 理想情况下，我希望能够设置Spiral的长度。 （从（0）到360°）
• 最后放一个cricle会很好（就像在我的样本中一样）

这是我到目前为止所提出的代码片段。

* {margin: 0; padding: 0;}
div {
  box-sizing: border-box;
  width: 200px; height: 200px;
  margin: 0 auto;
  background: #fff;
  
  border-top: 30px solid #fd0;
  border-right: 40px solid #fa0;
  border-bottom: 60px solid #f50;
  border-left: 0 solid blue;

  border-radius: 50%;
  
  position: relative;
}
div::after { /* kreis */
  content: "";
  position: absolute; top: 80%; left: 8%;
  width: 90px; height: 90px;
  background: red;
  border-radius: inherit;
}
div::before { /* hide the stuff that is too much. */
  content: "";
  position: absolute; top: 50%; left: 0;
  width: 50px; height: 100%;
  background-color: inherit;
}

<div></div>

我也会接受一种svg方式。

Answer 1

这是我想出的一些调整Css和html我猜它类似于图像DEMO没有在IE上测试不确定是否响应它

＆＃13;

＆＃13;

.spiral{
  background-color:black;
  width: 100px;
  height:100px;
  border-radius:50%;
}
.spiral:before{
    content: '';
    width: 27px;
    height: 43px;
    background-color: white;
    position: absolute;
    border-top-right-radius: 144px;
    border-bottom-left-radius: 61px;
    border-bottom-right-radius: 88px;
    left: 53px;
    top: 25px;
}
.spiral:after{
    content: '';
    width: 68px;
    height: 52px;
    background-color: white;
    position: absolute;
    left: 4px;
    top: -11px;
    transform: rotateZ(200deg);
}

＆＃13;

<div class="spiral"></div>

＆＃13;

＆＃13;

＆＃13;