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

最新推荐文章于 2024-05-23 15:42:27 发布

原创

最新推荐文章于 2024-05-23 15:42:27 发布 · 772 阅读

标签

#html #css #前端 #前端教程 #web前端

收录于

本文介绍了如何使用CSS来创建三角形，通过边框颜色和大小的设置，形成不同形状的三角形。理解这一原理能帮助我们绘制各种图形，包括但不限于三角形和梯形。

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

<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