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

基本示例

实现效果

实现代码

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

 
 
   
   
   
   
 

 
   
   
   
   
 

transparent 是透明的意思

实践示例

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

1、示例一

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



  
  
  

  
  
  

  
  
  

2、示例二

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



  
  
  
  

参考 CSS实现各种方向三角形