新人笔记之（如何使用html和css绘制出三角形）

清袖*

于 2024-04-02 20:23:57 发布

阅读量625

点赞数 9

文章标签：笔记 html css

本文链接：https://blog.csdn.net/2401_83311390/article/details/137287951

版权

使用html和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>
        div{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

二、进行外边框填充

<!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>
        div{
            width: 50px;
            height: 50px;
            border-top: 50px solid pink;
            border-bottom: 50px solid  blue;
            border-left: 50px solid  yellow;
            border-right: 50px solid  green;  
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

三、把盒子宽高设为0

<!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>
        div{
            width: 0px;
            height: 0px;
            border-top: 50px solid pink;
            border-bottom: 50px solid  blue;
            border-left: 50px solid   yellow;
            border-right: 50px solid  green;  
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

四、要哪边的三角形就把哪边的三角形设为透明

例如：我要向下的三角形

<!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>
        div{
            width: 0px;
            height: 0px;
            border-top: 50px solid pink;
            border-bottom: 50px solid  transparent;
            border-left: 50px solid   transparent;
            border-right: 50px solid  transparent;  
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>