Question

您好，我想使用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/

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

如何在CSS中堆叠圆圈？

1 个答案: