html - 如何在 CSS 中绘制一个带有起始位置和结束位置(以度为单位)的圆形扇区

Question

我正在尝试创建一个圆形扇区。该扇区应在 CSS 中构建，并以度为单位测量起始位置和结束位置。

例如:startPosition: 155deg; endPosition: 245deg;

我试图在这里找到这个问题的答案: How to draw a circle sector in CSS?

但是没有一个答案真正对我有帮助。

这是我到目前为止的代码( http://jsfiddle.net/idoglik6/1mvgnsrc/ ):

.pivot-control {
  float: left;
  position: relative;
}
.pivot-control .pivot-container {
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  border-color: #2e3d5d;
  box-sizing: border-box;
  background-color: #bcd0e7;
  width: 76px;
  height: 76px;
}
.pivot-control .pivot-container .pivot-circle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.pivot-control .pivot-container .pivot-circle .pivot-hand {
  position: relative;
  background: #228ad5;
  height: 38px;
  left: 49%;
  top: 0;
  transform-origin: 50% 100%;
  width: 2px;
  box-shadow: 0 -2px 0 2px #fafafa;
}

<div class="pivot-control">
  <div class="pivot-container">
    <div class="pivot-circle">
      <div class="pivot-hand" >
      </div>
    </div>
  </div>
</div>

谢谢!

Answer 1

选项 1 此处摘录

div {
    width: 5em;
    height: 5em;
    display: block;
    border-radius:50%;
    background-color: green;
    border: 2px solid green;
    float: left;
    margin: 1em;
}


.test {
        background-image:
      /*add 90 to 245deg to get the END point to  */
        linear-gradient(335deg, transparent 50%,  #bcd0e7 50%),
      /*add 90 to 155deg to get the START point to  */
        linear-gradient(245deg,  #bcd0e7 50%, transparent 50%);
}

<div class="test"></div>

选项2

这里是片段

div {
    width: 5em;
    height: 5em;
    display: block;
    border-radius:50%;
    background-color: green;
    border: 2px solid green;
    float: left;
    margin: 1em;
}


.test {
    background-image:
      /*subtract 155 from 90 to get the start point*/
        linear-gradient(65deg, transparent 50%,  #bcd0e7 50%),
       /*subtract 245 from 90 to get the end point*/
        linear-gradient(155deg,  #bcd0e7 50%, transparent 50%);
}

<div class="test"></div>