css简单实现三角形效果

废话不多说,直接上代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三角形</title>
    <style>
        .box {
            width: 0;
            height: 0;
            border: 100px solid rgba(0, 0,0, 0);
            border-top-color: lightpink;
            border-right-color: lightblue;
            border-left-color: lightseagreen;
            border-bottom-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

效果图:

看到这个效果图，我们就大概知道三角形怎么写了，我们可以先将宽度高度设置为0,然后在设置边框border: 100px solid rgba(0, 0,0, 0);

rgba的意思就是三原色红色,绿色,蓝色,a表示透明度opacity为0;border-top-color:为上边框的颜色，另外三个类似，最后如果只要显示一个三角形的话,就删除另外三个边框的颜色去除就好啦。

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三角形</title>
    <style>
        .box {
            width: 0;
            height: 0;
            border: 100px solid rgba(0, 0,0, 0);
            /* border-top-color: lightpink;
            border-right-color: lightblue;
            border-left-color: lightseagreen; */
            border-bottom-color: lightcoral;
            
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

效果图：

是不是很简单使用呀