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

Question

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

Answer 1

想象一下：

jsfiddle link

$(function() {
    var work = $( "#display" );
    $( "#selector" ).selectmenu ({
        selectmenuchange: function( event, ui ) {
        work.load($(this).val(),function(){
             $("#textdisplay").tabs();
            });
        }
    }); 
});

#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%;
}

或者，如果您需要中间透明（这有点hacky，您可能需要修改它以满足您的确切需求）：https://jsfiddle.net/wdoe8r3m/1/