CSS/SVG 创建螺旋

Question

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

这是一张图片，可以更清楚地说明我要实现的目标:

So a partial circle with an outline that gets bigger.

• 理想情况下，我希望能够设置 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 上测试不确定是否响应

.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);
}

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