CSS绘图实现三角形并使用grid布局

 <style>
   .box-container {
     display: flex;
   }
   .box {
     width: 0;
     height: 0;
     margin: 10px;
   }
   /* 顶朝上 */
   .box-top {
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid green;
   }
   /* 顶朝下 */
   .box-bottom {
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 50px solid green;
   }
   /* 顶朝左 */
   .box-left {
     border-bottom: 50px solid transparent;
     border-top: 50px solid transparent;
     border-right: 50px solid green;
   }
   /* 顶朝右 */
   .box-right {
     border-bottom: 50px solid transparent;
     border-top: 50px solid transparent;
     border-left: 50px solid green;
   }
   /* 顶朝左上 */
   .box-top-left {
     border-right: 50px solid transparent;
     border-top: 50px solid green;
   }
   /*  顶朝右上 */
   .box-top-right {
     border-left: 50px solid transparent;
     border-top: 50px solid green;
   }
   /* 顶朝左下 */
   .box-bottom-left {
     border-right: 50px solid transparent;
     border-bottom: 50px solid green;
   }
   /* 顶朝右下 */
   .box-bottom-right {
     border-left: 50px solid transparent;
     border-bottom: 50px solid green;
   }
 </style>
 <div class="box-container">
   <div class="box box-top"></div>
   <div class="box box-bottom"></div>
   <div class="box box-left"></div>
   <div class="box box-right"></div>
 </div>
 <div class="box-container">
   <div class="box box-top-left"></div>
   <div class="box box-top-right"></div>
   <div class="box box-bottom-left"></div>
   <div class="box box-bottom-right"></div>
 </div>

<style>
      .box-container-3x3 {
        display: grid;
        grid-template-columns: 100px 100px 100px;
      }
      .box {
        width: 0;
        height: 0;
      }
      /* 顶朝上 */
      .box-top {
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid green;
      }
      /* 顶朝下 */
      .box-bottom {
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 50px solid green;
      }
      /* 顶朝左 */
      .box-left {
        border-bottom: 50px solid transparent;
        border-top: 50px solid transparent;
        border-right: 50px solid green;
        /* 单元格内容对齐 */
        justify-self: end;
      }
      /* 顶朝右 */
      .box-right {
        border-bottom: 50px solid transparent;
        border-top: 50px solid transparent;
        border-left: 50px solid green;
      }
</style>
<div class="box-container-3x3">
  <div></div>
  <div class="box box-top"></div>
  <div></div>
  <div class="box box-left"></div>
  <div></div>
  <div class="box box-right"></div>
  <div></div>
  <div class="box box-bottom"></div>
  <div></div>
</div>

<style>
  .box-container-2x2 {
    display: grid;
    grid-template-columns: 50px 50px;
  }
  .box {
    width: 0;
    height: 0;
  }
  /* 顶朝左上 */
  .box-top-left {
    border-right: 50px solid transparent;
    border-top: 50px solid green;
  }
  /*  顶朝右上 */
  .box-top-right {
    border-left: 50px solid transparent;
    border-top: 50px solid green;
  }
  /* 顶朝左下 */
  .box-bottom-left {
    border-right: 50px solid transparent;
    border-bottom: 50px solid green;
  }
  /* 顶朝右下 */
  .box-bottom-right {
    border-left: 50px solid transparent;
    border-bottom: 50px solid green;
  }
</style>
<div class="box-container-2x2">
  <div class="box box-top-left"></div>
  <div class="box box-top-right"></div>
  <div class="box box-bottom-left"></div>
  <div class="box box-bottom-right"></div>
</div>