How To Make Below Code Without

in <pre> Is Easy but I Want To Make This Pattern Via <div>

Is Possible? With Margin? I Try With Margin And Its Successfully Done !!

But Some Pattern Cant Make Via This Techniques, I Will Show You

Successfully Done :-

*********
**** ****
***   ***
**     **
*       *
*       *
**     **
***   ***
**** ****
*********

Code:-

CSS :- .pattern {
        letter-spacing: 10px;
        margin: 10px;
        display: flex;
        font-weight: 700;
        font-size: 100%;
    }

HTML :-

<div class="pattern">
        <div class="space">
        *********<br>
        ****<span style="margin-left: 11%;"></span>****<br>
        ***<span style="margin-left: 33%;"></span>***<br>
        **<span style="margin-left: 55%;"></span>**<br>
        *<span style="margin-left: 77%;"></span>*<br>
        *<span style="margin-left: 77%;"></span>*<br>
        **<span style="margin-left: 55%;"></span>**<br>
        ***<span style="margin-left: 33%;"></span>***<br>
        ****<span style="margin-left: 11%;"></span>****<br>
        *********</div></div>

Waiting For Code :-

    *
   * *
  *   *
 *     *
*       *
 *     *
  *   *
   * *
    *