CSS Pyramid of circle-divs

Question

I want to get a pyramid/triangle of circles in my web page. But im struggling to get the CSS right. I´ve got the circles, but I´m strugglung with aligning them in the right shape, sometimes they are not centered, sometimes they are weirdly spread. Trying for quite some time now, any help would be highly appreciated :D

Examples:

   o  
  o o  
 o o o  
o o o o  

Example image

Circles:

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

Answer 1

shape-outside can help you with this task:

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