CSS circle-divs 金字塔

Question

我想在我的网页中获得 pyramid/triangle 个圈子。但我正在努力使 CSS 正确。我有圆圈，但我很难将它们对齐到正确的形状，有时它们不居中，有时它们奇怪地散开。现在已经尝试了一段时间，我们将不胜感激任何帮助：D

示例：

   o  
  o o  
 o o o  
o o o o

Example image

圈子：

.circle {
  height: 25px;
  width: 25px;
  background-color: #555;
  border-radius: 50%;
}

Answer 1

shape-outside 可以帮助您完成此任务：

.circle {
  display:inline-block;
  height: 25px;
  width: 25px;
  background-color: red;
  border-radius: 50%;
}

.box {
  width:300px;
  height:300px;
  border:1px solid;
}
.box:before,
.box > div:before{
  content:"";
  float:var(--d,left);
  height:100%;
  width:50%;
  shape-outside:linear-gradient(to top var(--d,left),transparent 50%,#fff 0);
  /* To illustrate */
  background   :linear-gradient(to top left,transparent 50%,yellow 0);
}
.box > div {
  height:100%;
}
.box > div:before {
  --d:right;
  /* To illustrate */
  background   :linear-gradient(to top right,transparent 50%,grey 0);
}

<div class="box">
  <div>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
  </div>
</div>

CSS circle-divs 金字塔

CSS Pyramid of circle-divs

html

css

css-shapes