CSS实现三角形

在开始之前先看一个例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #app {
            width: 200px;
            height: 200px;
            border: 1px solid;
            border-top-color: blue;
            /* transparent 透明 */
            border-bottom-color: yellow;
            border-right-color: orange;
            border-left-color: red;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>

效果图：

image.png

此时在浏览器测试，点击div，将其中的宽高不断缩小，就会出现如下的图：

image.png

需要什么类型的三角形，可以将其他背景颜色变为透明即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 盒子的宽高必须为0 */
        #app {
            width: 0;
            height: 0;
            border: 100px solid;
            border-top-color: transparent;
            /* transparent 透明 */
            border-bottom-color: yellow;
            border-right-color: transparent;
            border-left-color: transparent
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>

效果图如下

image.png