CSS实现三角形

最新推荐文章于 2023-09-05 16:23:33 发布

zhenzuo_x

最新推荐文章于 2023-09-05 16:23:33 发布

阅读量1.6k

点赞数

分类专栏：前端 css

本文链接：https://blog.csdn.net/zhenzuo_x/article/details/91046531

版权

前端同时被 2 个专栏收录

27 篇文章 3 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

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

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>

效果如下：

zhenzuo_x

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS实现三角形

好久没写博客了，这段实习期间真的好忙哦。终于今天有时间来对之前说的面试进行一个小小的总结，后续再慢慢补充一些。在面试阿里的前端时，对基础的知识的考察中，考察到一个经典的问题，但是博主当时这个问题并没有去进行相应的学习，面试官对我建议后续再补充学习下，因此今天也来补充总结下。CSS实现三角形对于一个三角形，如何用css来实现呢？其实代码很简单，在此直接贴上相应的代码以及相应的效果。...
复制链接

扫一扫

专栏目录