制作以下设计，不带预标签

Question

在<pre>很容易制作这个数字，但我想通过<div>

制作此模式

有可能吗？有保证金？

我尝试使用保证金并成功完成但有些模式无法通过这种技术制作。

成功完成： -

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

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>

CSS

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

想要实施

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

段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我添加了自己的答案。

.child{
  text-align: center;
  font-size: 80%;
  font-weight: 700;
}
p:nth-child(1),p:nth-child(9) {
  letter-spacing: 5px;
  margin-right: -5px;
}
p:nth-child(2),p:nth-child(8) {
  letter-spacing: 25px;
  margin-right: -25px;
}
p:nth-child(3),p:nth-child(7) {
  letter-spacing: 50px;
  margin-right: -50px;
}
p:nth-child(4),p:nth-child(6) {
  letter-spacing: 70px;
  margin-right: -70px;
}
p:nth-child(5) {
  letter-spacing: 100px;
  margin-right: -100px; 
}

<div class="child">
  <p>*</p>
  <p>**</p>
  <p>**</p>
  <p>**</p>
  <p>**</p>
  <p>**</p>
  <p>**</p>
  <p>**</p>
  <p>*</p>
</div>