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

Question

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

Answer 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/

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

Recreate this radial image using css

css

image

css-shapes