css实现三角形

于2022-12-12 15:16:10发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=q, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sj {
            width: 50px;
            height: 50px;
            border-top: 50px solid red;
            border-left: 50px solid yellow;
            border-right: 50px solid green;
            border-bottom: 50px solid orange;
        }
    </style>
</head>
<body>
    <div class="sj"></div>
</body>
</html>

运行效果

此时把宽和高都改成0，则

需要哪一边的三角形，则把其余另外的三边的颜色改成透明即可。比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=q, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sj {
            width: 0;
            height: 0;
            border-top: 50px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }
    </style>
</head>
<body>
    <div class="sj"></div>
</body>
</html>