CSS实现三角形

最新推荐文章于 2026-06-02 14:33:24 发布

原创最新推荐文章于 2026-06-02 14:33:24 发布 · 1.7k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

css

本文主要介绍了在面试阿里前端职位时遇到的一个经典问题——如何使用CSS实现三角形。通过展示不同类型的三角形（如彩色、红色直角三角形），解释了利用border-color实现三角形的原理，帮助读者理解这一CSS技巧。

好久没写博客了，这段实习期间真的好忙哦。终于今天有时间来对之前说的面试进行一个小小的总结，后续再慢慢补充一些。

在面试阿里的前端时，对基础的知识的考察中，考察到一个经典的问题，但是博主当时这个问题并没有去进行相应的学习，面试官对我建议后续再补充学习下，因此今天也来补充总结下。

CSS实现三角形

对于一个三角形，如何用css来实现呢？其实代码很简单，在此直接贴上相应的代码以及相应的效果。

<!DOCTYPE html>
<html>
<head>
    <style>
        .myTriangle{
            width: 0px;
            height: 0px;
            border: 40px solid;
            border-color: orange blue red green;
        }
    </style>

</head>
<body>
    <div class="myTriangle"></div>
</body>
</html>

效果图如下：

嗯，聪明的你看到这个颜色效果以及相应的 border-color 代码是不是知道怎么实现了

如果我要下面的红色三角形那就其他边颜色为透明就好啦

<!DOCTYPE html>
<html>
<head>
    <style>
        .myTriangle{
            width: 0px;
            height: 0px;
            border: 40px solid;
            border-top-color: transparent;
            border-left-color:transparent;
            border-right-color: transparent;  
            border-bottom-color: red; 
        }
    </style>

</head>
<body>
    <div class="myTriangle"></div>
</body>
</html>

实现效果如下：

然后如果你要实现一个直角三角形，再进行相应的形状构思就行啦

<!DOCTYPE html>
<html>
<head>
    <style>
        .myTriangle{
            width: 0px;
            height: 0px;
            border: 40px solid;
            border-top-color: transparent;
            border-left-color:transparent;
            border-right: none;  
            border-bottom-color: red; 
        }
    </style>

</head>
<body>
    <div class="myTriangle"></div>
</body>
</html>

你可能会好奇为什么border如此神奇，这里给段代码和效果，我想你也会恍然大悟，然后感叹神奇的！

<!DOCTYPE html>
<html>
<head>
    <style>
        .myTriangle{
            width: 10px;
            height: 10px;
            border: 40px solid; 
            border-color: orange blue red green;
        }
    </style>

</head>
<body>
    <div class="myTriangle"></div>
</body>
</html>

效果如下：