CSS Пирамида из кругов

Question

Я хочу получить пирамиду / треугольник из кругов на моей веб-странице. Но я изо всех сил пытаюсь понять CSS правильно. У меня есть круги, но я изо всех сил пытаюсь выровнять их в правильную форму, иногда они не по центру, иногда они странно разбросаны. Пытаясь в течение некоторого времени, любая помощь будет весьма признательна: D

Примеры:

   o  
  o o  
 o o o  
o o o o  

Пример изображения

Круги:

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