ajkey94 ajkey94 - 4 months ago 24
CSS Question

Draw radius lines in circle with CSS

I'm trying to figure out how I could draw a line from the center of the circle outward to the border based on a given degree. (I'd eventually want a line every 30 degrees resulting in 12 total lines)

Below is a picture of something similar to what I'm trying to achieve.

enter image description here

CSS for the circle I have currently:

.circle-container{
display: block;
position: absolute;
top: 15.5%;
left: 14.5%;
background: #fff;
width: 11.5em;
height: 11.5em;
border-radius: 50%;
border-style: solid;
border-width: thin;
border-color: #bfbfbf;
margin: 0em;
}


I'm not really sure where I should start.

Answer

I'd use Canvas or SVG...otherwise you'll end up with a LOT of unsemantic elements just for styling purposes.

However, a brief example

.circle-container {
  display: block;
  position: absolute;
  top: 15.5%;
  left: 14.5%;
  background: #fff;
  width: 11.5em;
  height: 11.5em;
  border-radius: 50%;
  border-style: solid;
  border-width: thin;
  border-color: #bfbfbf;
  margin: 0em;
}
.radius {
  position: absolute;
  width: 50%;
  height: 3px;
  left: 50%;
  top: 50%;
  background: red;
  transform-origin: left center;
}
.two {
  background: green;
  transform: rotate(-30deg);
}
<div class="circle-container">
  <div class="radius"></div>
  <div class="radius two"></div>
</div>

Comments