用CSS3写一个三角形

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

转载最新推荐文章于 2025-06-21 09:15:59 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ce538f06fb9a07ecf71fc90

博客主要介绍了使用CSS实现三角形的方法。先剖析原理，指出当content内容区缩小至0px时可出现三角形，并给出相关CSS代码；接着进行实践，依次创建上、下、左、右四个div盒子，添加CSS样式来实现不同方向的三角形。

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

一、剖析原理

1.如下图所示，空白区域为 content 内容区，四周为 border 边框。

css代码：

width: 100px;
height: 100px;
border-top:50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid yellow;
复制代码

2.当 content 逐渐缩小至 0px 时，就会出现想要的三角形。

css代码：

width: 0px;
height: 0px;
border-top:50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid yellow;
复制代码

二、小试牛刀

1.首先，我们依次创建上、下、左、右四个 div 盒子。

    <div class="up"></div>
    <div class="down"></div>
    <div class="left"></div>
    <div class="right"></div>
复制代码

2.添加css样式。

上三角形

.up {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}
复制代码

下三角形

.down {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: red transparent transparent transparent;
}
复制代码

左三角形

.down {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: transparent red transparent transparent;
}
复制代码

右三角形

.down {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: transparent transparent transparent red;
}
复制代码