HTML+CSS写三角形原理

最新推荐文章于 2024-04-02 20:23:57 发布

qwe耿

最新推荐文章于 2024-04-02 20:23:57 发布

阅读量757

点赞数

分类专栏： html/css 文章标签： css三角形原理

本文链接：https://blog.csdn.net/gyy93/article/details/72722585

版权

html/css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML+CSS写三角形原理

html:

<div class="triangle">
    这是三角形
</div>

css:

.triangle{
        border-top: 20px solid green;
        border-left: 20px solid red;
        border-bottom: 20px solid yellow;
        border-right: 20px solid blue;
        }

加上4边边框之后的效果：
这里写图片描述

在这基础上把中间内容区域的宽高设置为0：

.triangle{
        width: 0;
        height: 0;
        border-top: 20px solid green;
        border-left: 20px solid red;
        border-bottom: 20px solid yellow;
        border-right: 20px solid blue;
        }

去掉宽高效果：
这里写图片描述

去掉文字：

<div class="triangle">
    <!--这是三角形-->
</div>

去掉文字效果：
这里写图片描述

总结：现在就剩下4个小的三角形，想要哪一边的三角形就把其他三边的颜色设置为透明

全部代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .triangle{
                width: 0;
                height: 0;
                border-top: 20px solid transparent; /*transparent指全透明颜色*/
                border-left: 20px solid transparent;
                border-bottom: 20px solid yellow;
                border-right: 20px solid transparent;
            }
        </style>
    </head>
    <body>
        <div class="triangle">
            <!--这是三角形-->
        </div>
    </body>
</html>