How to create circles around a circle with css, javascript?

Question

I would like to create a circle (without any animation) which is surrounded by other circles, like this:

Answer 1

Adding border-radius:50% to a

that has an equal with and height then putting a background-color on it will make a circle out of CSS (light load).

.big_circle {
  width:10em;
  height:10em;
  border-radius:50%;
  background-color:blue;
}

You can then absolutely position the circle directly in the middle of the screen by using the position:absolute and negative margin trick.

.big_circle {
  width:10em;
  height:10em;
  border-radius:50%;
  background-color:blue;

  position:absolute;
  top:50%;
  left:50%;
  margin-left:-5em;
  margin-top:-5em;
}

Create a class to take care of the styling for the smaller circles.

.little_circle {
  width:3em;
  height:3em;
  border-radius:50%;
  background-color:green;
  position:relative;
}

Then add IDs (or any other way of identifying them) to position the relatively compared to the big circle.

#little_one {
  bottom:1em;
  right:2em;
}

#little_two {
  bottom:6.5em;
  left:3.5em;
}

#little_three {
  bottom:7em;
  left:9em;
}

// etc...

Here's a CodePen with a sample.

0 讨论(0)

查看其它5个回答

发布评论:

提交评论

---

•  加载中...