web前端入门到实战：css绘制三角形最简单代码

关注

VIP免费原创最新推荐文章于 2024-05-23 15:42:27 发布 774 阅读 AI 写同款· GEO 优化 ›

web前端入门到实战：CSS图形绘制合集以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的，不少实现以前我介绍过，或者你也知道，但是有些相信你没见过。 1. 正方形实时渲染效果如下：相关CSS代码： #square { width: 100px; height: 100px; background: red; } 2. 长方形效果：相关CSS代码： web前端开发学习Q-q-u-n： 767273102 ，... 阅读详情

首先，我们知道用边框实现一个三角形很简单，直接上代码上图。

<div class="content">
       <div class="up"></div>
</div>

专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.triangleTest {
        .content div {
            width: 0;
            height: 0;
            &.up {
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-bottom: 100px solid red;
                border-top: 0;
            }
        }
    }

可以看到用样式的border-width来实现一个三角形很简单，但是本文会从原理上来讲解，为什么会这样展示。

#box{
            width:200px;
            height:200px;
            background:yellow;
            border-top: 80px solid red;
            border-right:80px solid black;
            borde