html - 同一行中的三个圆圈使用 HTML 和 Css

Question

我想要的是连续对齐三个圆圈，中间的圆圈必须居中。我只使用 HTML5 和 CSS，没有任何其他框架，但我无法达到预期的结果。谁能帮我？任何帮助将不胜感激。

.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

您可以像这样尝试使用 flex 并简化您的代码:

.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>

您还可以依靠渐变为圆圈着色，而无需额外标记:

.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>