如何用 CSS 实现三角形

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

杏子 |职业咨询师

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

阅读量648

点赞数

CC 4.0 BY-SA版权

分类专栏：设计模式

本文链接：https://blog.csdn.net/weixin_44135121/article/details/108248761

设计模式专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了如何使用CSS边框属性来绘制具有特定颜色的三角形。首先，创建一个四边不同颜色的正方形，然后调整宽度为0，并将除所需方向外的所有边框颜色设置为透明，最终形成一个独特的三角形。

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

如何用 CSS 实现三角形

1. 绘制一个拥有四种不同边框颜色的正方形

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .border{
        width:50px;
        height: 50px;
        border-width: 50px;
        border-style: solid;
        border-color: red yellow blue green;
    }
</style>
<body>
<div class="border"></div>
</body>
</html>

效果

在这里插入图片描述

2. 将正方形的宽度设为0，高度可以去掉

备注：不能将宽度去掉，因为 div 为块级标签，去掉宽度值，会平铺整个区域。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .border{
        border-width: 50px;
        border-style: solid;
        border-color: red yellow blue green;
    }
</style>
<body>
<div class="border"></div>
</body>
</html>

效果

在这里插入图片描述

3. 除了某个方向的三角，其他颜色全部设为透明

备注：四个方向的颜色设定分别为上右下左的顺序。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .border{
        border-width: 50px;
        border-style: solid;
        border-color: red transparent transparent transparent;
    }
</style>
<body>
<div class="border"></div>
</body>
</html>