如何在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

这样的东西？ 如果您需要使用按钮控制动画，只需将动画规则放在单独的类中并切换那个。

.pivot-control {
  float: left;
  position: relative;
}

.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-circle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.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;
  animation: rotate-anim 3s;
  transform: rotate(245deg);
}

@keyframes rotate-anim {
  0% {
    transform: rotate(155deg);
  }
  100% {
    transform: rotate(245deg);
  }
}

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

http://jsfiddle.net/jeroenooms/knL4sd3L/3/

Answer 2

选项1 这里的片段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强> OPTION2

这里的片段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;