CSS画三角形

最新推荐文章于 2024-08-12 10:59:58 发布

风火一回

最新推荐文章于 2024-08-12 10:59:58 发布

阅读量665

点赞数

分类专栏： CSS 文章标签： css 三角形

本文链接：https://blog.csdn.net/mafan121/article/details/79912249

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS画三角形

1.实心三角形

.triangle {
            margin: 20px auto;
            width: 0;
            height: 0;
            border-width: 30px;
            border-style: solid;
            border-color: transparent #e87070 transparent transparent;
}

实心三角形的实现，实际上是一个长宽均为0的div，完全由border组成的，根据border-width来控制三角形的大小，根据border-color来控制三角形的朝向和颜色。

其原始的原理是我们画了一个矩形，矩形的长宽由border的长宽总和决定，矩形的原点以border-width的值决定，该矩形根据原点会被划分为4个三角形，我们只需要只保留它某一个三角形即可实现实心三角形的展示，其他三角形的颜色均置为白色即可。

2.空心三角形

.triangle-hollow {
            margin: 20px auto;
            width: 0;
            height: 0;
            border-width: 30px;
            border-style: solid;
            border-color: transparent #000000 transparent transparent;
            position: relative;
}

.triangle-hollow:after {
            content: '';
            margin: 20px auto;
            width: 0;
            height: 0;
            border-width: 30px;
            border-style: solid;
            border-color: transparent #ffffff transparent transparent;
            position: absolute;
            top: -50px;
            left: -30px;
}

空心三角形其实是由2个三角形重叠组成的。首先我们画一个实心的三角形，然后再画一个颜色为纯白色的三角形，然后用这个纯白色的三角形覆盖到实心三角形上，只留出实心三角形的一部分作为边线即可。

3.测试代码

<html>

<head>
    <title>测试</title>
    <style>
        .container {
            width: 300px;
            height: 300px;
            border: 1px solid #ffc2c2;
            margin: 10px auto;
        }
        .rectangle{
            margin: 20px auto;
            width: 0;
            height: 0;
            border-width: 10px 20px 30px 40px;
            border-style: solid;
            border-color: red blue yellow green;
        }
        .triangle {
            margin: 20px auto;
            width: 0;
            height: 0;
            border-width: 30px;
            border-style: solid;
            border-color: transparent #e87070 transparent transparent;
        }

        .triangle-hollow {
            margin: 20px auto;
            width: 0;
            height: 0;
            border-width: 30px;
            border-style: solid;
            border-color: transparent #000000 transparent transparent;
            position: relative;
        }

        .triangle-hollow:after {
            content: '';
            margin: 20px auto;
            width: 0;
            height: 0;
            border-width: 30px;
            border-style: solid;
            border-color: transparent #ffffff transparent transparent;
            position: absolute;
            top: -50px;
            left: -30px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="rectangle"></div>
        <hr>
        <div class="triangle"></div>
        <hr>
        <div class="triangle-hollow"></div>
    </div>
</body>

</html>