初识前端到实战，CSS代码实现三角形，典型面试题

像风一羊的女孩

于 2021-09-22 21:11:41 发布

阅读量130

点赞数

分类专栏： HTML CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45921611/article/details/120423072

版权

HTML 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

CSS代码实现三角形是一道典型的面试题，不难但是要理解代码的思维逻辑，达到熟练的程度，仔细看代码就会发现其中的规律，编程就是要不断地写代码，熟能生巧，也就体会到了其中的奥秘，写代码是一件很有成就感的事情，真正理解代码的时候就会感觉代码很简单，每个人都有他的天赋，所以大胆地学习吧！

加油，少年！

废话不多说，上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角</title>
    <style>
        /* 不同颜色的三角形组成的边框 */
        .aa{
            width: 0px;
            height: 0px;
            border-width: 80px;
            border-style: solid;
            border-color: blueviolet yellow red pink;
        }
        /* 尖角朝下 */
        .bb{
            width: 0px;
            height: 0px;
            border-width: 60px 60px 0px 60px;
            border-style: solid;
            border-color: blueviolet transparent transparent transparent;
        }
        /* 尖角朝左 */
        .cc{
            width: 0px;
            height: 0px;
            border-width:60px 60px 60px 0px;
            border-style: solid;
            border-color: transparent red transparent transparent;
        }
        /* 尖角朝上 */
        .dd{
            width: 0px;
            height: 0px;
            border-width: 0px 70px 70px 70px;
            border-style: solid;
            border-color: transparent transparent pink transparent; 
        }
        /* 尖角朝右 */
        .ee{
            widows: 0px;
            height: 0px;
            border-width: 60px 0px 60px 60px;
            border-style: solid;
            border-color: transparent transparent transparent yellow;
        }
    </style>
</head>
<body>
    <div class="aa"></div><br>
    <div class="bb"></div><br>
    <div class="cc"></div><br>
    <div class="dd"></div><br>
    <div class="ee"></div>
</body>
</html>

运行结果如下：

像风一羊的女孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识前端到实战，CSS代码实现三角形，典型面试题

CSS代码实现三角形是一道典型的面试题，不难但是要理解代码的思维逻辑，达到熟练的程度，仔细看代码就会发现其中的规律，编程就是要不断地写代码，熟能生巧，也就体会到了其中的奥秘，写代码是一件很有成就感的事情，真正理解代码的时候就会感觉代码很简单，每个人都有他的天赋，所以大胆地学习吧！加油，少年！废话不多说，上代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .
复制链接

扫一扫