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

2022-03-05 15:25:55

基本示例

实现效果

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>

transparent 是透明的意思

实践示例

凌乱的三角形不好看，有了以上认识，我用grid布局改造一下位置排布

1、示例一

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


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

2、示例二

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

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

参考

CSS实现各种方向三角形

码农公寓

基本示例

实践示例

相关文章