How to draw a circle sector in CSS with a start and an end position (in deg)

Question

I am trying to create a circle sector. This sector should be built in CSS by with a starting and an end positions measured in degrees.

For example: startPosition: 155deg; endPosition: 245deg;

I tried to find answer to this problem here: How to draw a circle sector in CSS?

But none of the answers really helped me.

This is my code so far (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>

Thanks!

score 1 · Answer 1 · edited Jul 09 '17 at 05:13

Something like this? If you need to control the animation with a button, just put the animation rule in a separate class and toggle that one.

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

Thanks. nice animation but i need to color the section (the pivot pass) — Ido Glikman, Jan 17 '16 at 08:02

score 1 · Answer 2 · answered Jan 15 '16 at 00:24

OPTION 1 snippet here

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>

OPTION2

Snippet here

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>

nice! I tried to color the section between 30deg to 250 deg with your css Instructions, but unfortunately it did not color the right part. — Ido Glikman, Jan 17 '16 at 08:15
.test { background-image: /*add 90 to 245deg to get the END point to 250 */ linear-gradient(160deg, transparent 50%, #bcd0e7 50%), /*add 90 to 300deg to get the START point to 30deg */ linear-gradient(300deg, #bcd0e7 50%, transparent 50%); } — Ido Glikman, Jan 17 '16 at 08:16

How to draw a circle sector in CSS with a start and an end position (in deg)

2 Answers2