基本示例
实现效果
实现代码
<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、示例一
<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>
参考
