纯css实现各种图形实现三角形需要注意的地方是：width和height都设置为0;不需要展示的部分颜色设置为trans

实现三角形

需要注意的地方是：width和height都设置为0;不需要展示的部分颜色设置为transparent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{
            width:0px;
            height:0px;
            border:100px solid;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-color: teal;
        }

    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

实现正方形

方法一

原理：1vw = 1% viewport width

<div class="placeholder"></div>
.placeholder{
            background-color: rebeccapurple;
            width: 30%;
            height:30vw;
        }

方法二

原理：/* padding百分比相对父元素宽度计算 */

 .placeholder{
            background-color: rebeccapurple;
            width: 20%;
            padding-bottom: 20%;
        }
<div class="placeholder"></div>