Three Circle in same row using HTML and Css

Question

What I want is to align three circle in a row and the middle circle must be in center. I am using only HTML5 and CSS without any other frameworks but I am not able to achieve the desired outcome. Can anyone help me? Any help will be appreciated.

.chart {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

.chart3 {
    position: absolute;
    width: 0;
    height: 0;
    right: 0;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

#chart1 {
    border-right: 100px solid red;
    border-top: 100px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

#chart2 {
    border-right: 100px solid transparent;
    border-top: 100px solid green;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

<!--I want to use this HTML to achieve the desired result-->
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>

<!--Tables I used to achieve the desired result-->
<table>
    <tr>
        <td>
            <div id="chart1" class="chart"></div>
            <div id="chart2" class="chart"></div>
            <div id="chart3" class="chart"></div>
            <div id="chart4" class="chart"></div>
        </td>
        <td>
            <div id="chart1" class="chart"></div>
            <div id="chart2" class="chart"></div>
            <div id="chart3" class="chart"></div>
            <div id="chart4" class="chart"></div>
        </td>
        <td>
            <div id="chart1" class="chart3"></div>
            <div id="chart2" class="chart3"></div>
            <div id="chart3" class="chart3"></div>
            <div id="chart4" class="chart3"></div>
        </td>
    </tr>
</table>         

Answer 1

You can try flex and simplify your code like this:

.container {
  display: flex;
  justify-content: space-between;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.chart {
  position: absolute;
  right:0;
  height:0;
  width:0;
  border: 50px solid transparent;
}

.chart:nth-child(1) {
  border-right-color:red;
}

.chart:nth-child(2) {
  border-top-color:green;
}

.chart:nth-child(3) {
  border-left-color:yellow;
}

.chart:nth-child(4) {
  border-bottom-color:orange;
}

<div class="container">
  <div class="circle">
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
  </div>
  <div class="circle">
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
  </div>
  <div class="circle">
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
  </div>
</div>

You can also rely on gradient to color the circle without the need of extra markup:

.container {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.circle {
  width: 100px;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(45deg);
}
.four {
  background: 
  linear-gradient(to right, red 50%, green 51%) 0 0/100% 50% no-repeat, 
  linear-gradient(to right, yellow 50%, orange 51%) 0 100%/100% 50% no-repeat;
}
.three  {
  background:
  linear-gradient(to top left, yellow 50%, red 51%) 0% 100%/51% 50% no-repeat,
  linear-gradient(to top right, yellow 50%, green 51%) 100% 100%/50% 50% no-repeat,
  linear-gradient(to right, red 50%, green 51%) 0 0/100% 100% no-repeat;
}
.two {
  background: linear-gradient(to right, red 50%, green 51%) 0 0/100% 100% no-repeat
}

<div class="container">
  <div class="circle four">
  </div>
  <div class="circle three">
  </div>
  <div class="circle two">
  </div>
</div>