CSS绘图实现三角形并使用grid布局-阿里云开发者社区

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

2021-11-26 123

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

基本示例

实现效果

33.1.png

实现代码

 <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、示例一

33.2.png

<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、示例二

33.3.png

<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实现各种方向三角形

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

基本示例

实践示例

热门文章

最新文章

相关课程

相关电子书

相关实验场景