如何在css中堆叠圆圈？ [复制]答案

【问题标题】：How do I stack circles in css? [duplicate]如何在css中堆叠圆圈？ [复制]
【发布时间】：2019-10-07 23:28:28
【问题描述】：

您好，我想使用 css 制作一个简单的图表（五分之一的圆），但我不知道如何堆叠圆，使它们具有相同的中点但半径不同。

我尝试了以下代码，但圆圈的起点相同，而不是中点。

.container {
  position: absolute;
  left: 50%;
  top: 50%;
}

.circle {
  border-radius: 50%;
  border: 1px solid black;
  position: absolute;
}

.circle:first-child {
  width: 50px;
  height: 50px;
}

.circle:nth-child(2) {
  width: 80px;
  height: 80px;
}

.circle:nth-child(3) {
  width: 110px;
  height: 110px;
}

.circle:nth-child(4) {
  width: 140px;
  height: 140px;
}

.circle:last-child {
  width: 170px;
  height: 170px;
}

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

我得到了具有共同起点的圆圈，但我需要将它们与共同中心堆叠在一起。

演示： https://jsfiddle.net/60mud4ga/1/

【问题讨论】：

您似乎正在尝试创建图表。您可能最好使用 SVG 创建图表图像，然后将该 SVG 作为标记直接嵌入到页面中，或者通过 <img> 元素引用它。使用 CSS 绘图就像一台 Rube Goldberg 机器，需要大量设置并且可以完成，但是——一般来说——并不实用。
您可以在每个圆圈上使用 transform: translate(x,y) 。由于无论如何您都在硬编码圆的初始大小（而不是动态计算它们），因此只需硬编码 x、y 偏移量。 jsfiddle.net/w82Lnatg

标签： html css

【解决方案1】：

一种方法是通过 transform: translateX(-50%) translateY(-50%); 将所有圆形 div 平移 -50%：

.container {
  position: absolute;
  left: 50%;
  top: 50%;
}

.circle {
  border-radius: 50%;
  border: 1px solid black;
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
}

.circle:first-child {
  width: 50px;
  height: 50px;
}

.circle:nth-child(2) {
  width: 80px;
  height: 80px;
}

.circle:nth-child(3) {
  width: 110px;
  height: 110px;
}

.circle:nth-child(4) {
  width: 140px;
  height: 140px;
}

.circle:last-child {
  width: 170px;
  height: 170px;
}

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

【讨论】：

translateX(-50%) translateY(-50%); 等于 translate(-50%, -50%);。