🚀 CSS绘制一个三角形,并阐明原理

📅 发布于 2025年12月 | 👤 作者：博主 | 🏷️ 标签："css","三角形", Web开发, 前端, 面试

欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。

总结

三角形的原理就是一个盒子有四个边框交界处都是三角形(度角跟border-width设置有关)，当盒子宽高都为0，就是一个由4个三角形形成的正方形/长方形，给border-color设置透明，设置颜色的边就是一个三角形了

🌟 伪元素实现（推荐）：

伪元素来实现这种装饰性的效果，content 为空，就不需要 width 了

        
        <div class="triangle"></div>
        
        //正方形
        .triangle:before{
          content: '';
          border:10px solid transparent;
          border-bottom-color: lightgreen;
        }
        
        //长方形
        .triangle:before{
          content: '';
          border-width:10px 20px;
          border-style:solid;
          border-color:transparent;
          border-bottom-color: lightgreen;
        }

🌟 width:0实现：

          
          .triangle{
            width: 0px;
            border:10px solid transparent;
            border-bottom-color: lightgreen;
          }


          //原理
          .triangle{
            width: 0px;
            background: white;
            border-left: 100px solid lightgray;
            border-right: 100px solid blue;
            border-top: 100px solid lightgreen;
            border-bottom:100px solid red;
          }

← 返回首页