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>

You can use a CSS [FlexBox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — L Y E S - C H I O U K H, Feb 23 '18 at 08:34

Temani Afif · Answer 1 · 2018-02-23T09:33:37.447

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>

If I want circle to have ony 3 colors then what shall I do? @Temani Atif — John, Feb 23 '18 at 08:57
@John check again, for more complex coloring you can refer to this : https://stackoverflow.com/questions/47789300/css-multi-coloured-circular-div-using-background-colours/47789489#47789489 — Temani Afif, Feb 23 '18 at 09:09
@TemaniAtif.. I am using wkhtmltopdf and in that the format of background gradient supported is . Can you help me in writing gradient in this format — John, Mar 01 '18 at 07:24
@John in this case you won't be able to have the same output ... in this syntax the 4 first values define the direction and the last two the colors. check theses for more information : https://stackoverflow.com/questions/15642538/wkhtmltoimage-css3-gradient-rendering-in-snapshots https://stackoverflow.com/questions/27565176/how-can-i-get-wkhtmltopdf-to-display-th-and-td-background-gradients — Temani Afif, Mar 01 '18 at 08:00

Three Circle in same row using HTML and Css

1 Answers1