使用 css 重新创建此径向图像答案

【问题标题】：Recreate this radial image using css使用 css 重新创建此径向图像
【发布时间】：2015-07-22 14:13:36
【问题描述】：

我想知道是否可以使用 css 重新创建以下图像。我目前正在使用它，但是是 svg 格式。

【问题讨论】：

似乎很有可能。到目前为止，您尝试过什么？
到目前为止你尝试过哪些 CSS？
圆很简单，不过不知道怎么分割。
@Mr.Smithyyy 发布您的尝试可以帮助其他人了解您遇到的困难。

【解决方案1】：

想象一下：

#circle {
  background: #ccc;
  border-radius: 50%;
  /* Change these two equally to change circle size.  Can be pixels, too. */
  width: 25%;
  padding-top: 25%;
  height: 0;
  position: relative;
}
.hand {
  background: black;
  width: 1px;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
}
.hand:nth-child(2) {
  transform: rotate(90deg);
}
.hand:nth-child(3) {
  transform: rotate(45deg);
}
.hand:nth-child(4) {
  transform: rotate(135deg);
}
#circle:after {
  content: '';
  display: block;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 10%;
  left: 10%;
}

<div id="circle">
  <div class="hand"></div>
  <div class="hand"></div>
  <div class="hand"></div>
  <div class="hand"></div>
</div>

或者如果您需要中间部分是透明的（这有点笨拙，您可能需要对其进行修改以满足您的确切需求）：https://jsfiddle.net/wdoe8r3m/1/

【讨论】：