css画正三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css画正三角形</title>
    <style type="text/css">
            .container {
                width: 0;
                height: 0;
                border-color: transparent transparent red transparent;  /*1、下边框有颜色 对应着上边框没有宽度,是正三角形;2、上边框有颜色 对应着下边框没宽度,是倒三角形*/
                border-style: solid;
                border-width: 0 300px 300px 300px;
            }
    </style>
</head>
<body>
    <div class="container">

    </div>
</body>
</html>

你可能感兴趣的:(css画正三角形)