HTML+CSS写一个三角形（原理+实例）

最新推荐文章于 2025-06-21 09:15:59 发布

kivet.whx

最新推荐文章于 2025-06-21 09:15:59 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML+CSS学习相关文章标签： html css 三角形

本文链接：https://blog.youkuaiyun.com/inthuixiang/article/details/78554710

HTML+CSS学习相关专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS创建三角形，关键在于理解将元素的宽高设为0，并通过调整边框来实现。通过示例代码和实际效果展示了具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写之前，首先要了解其中的原理

html代码只需创建两个名为triangle、triangle-left的div盒子即可，
代码：

<body>
    <div id="triangle"></div><br /><br /><br />
    <div id="triangle-left"></div>

</body>

在triangle.html文件中，下面代码及其实现后的效果图如下：

#triangle{
    margin-top:50px;
    width: 100px;
    height: 100px;
    border-top:100px solid red;
    border-right:100px solid blue;
    border-bottom:100px solid green;
    border-left:100px solid orange;
}

图：

实现出现三角形的效果，可以将div盒子宽高都设为0px，上面图就会变成四个三角形组成的一个正方形，再通过设置边框宽度以及颜色等，就能实现一个三角形
代码：

#triangle-left {
    width: 0px; 
    height: 0px; 
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

三角形效果图：