Search code examples
htmlcsscss-shapes

How to make content inside a circle div fitting correctly

I need to implement a structure like the graph following (with HTML, CSS) and I don't have any idea how to make the content (the circles) fit inside the bigger circle.

I would appreciate any solution that solves the problem at least partially.

I added a simplified page with some basic HTML and CSS for this problem. What I need is for the content inside the div.structure to fit (see the first image).

That would be a good start for what I need.

.structure {
  float: left;
  text-align: center;
  background-color: #ccc;
  border-radius: 50%;
  margin: 20%;
  width: 60%;
  display: table;
}
.item {
  width: 50px;
  height: 50px;
  float: left;
  margin: 10px 5px;
  background-color: deeppink;
  border-radius: 50%;
  display: table-cell;
  vertical-align: middle;
}
.item.s1 {
  background-color: deeppink;
}
.item.s2 {
  background-color: green;
}
.item.s3 {
  background-color: red;
}
.item.s4 {
  background-color: blue;
}
.item.s5 {
  background-color: aqua;
}
.structura_dep.dep6 {
  background-color: gray;
}
<div class="structure">
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
</div>

enter image description here enter image description here

Solution

  • I just worked a little bit on this but i think you can get the idea you just have to add your shapes i gave you a start in the right direction though

    Codepen http://codepen.io/noobskie/pen/NGqPEJ?editors=110 There is probably other better ways to complete this but this is just to give you a idea.

    Ive wrapped all your colors into spans just for better orginazation.

    To add a new circle all you need to do is copy ie:<a href='#' class='deg10'></a> paste it into the same span rename the class to <a href='#' class='deg20'></a> and then just change the scss accordingly.

    All its using primarily is the css transform property and moving it along the page.

    A good article to checkout and help you along with this could be found here Position icons into circle