0
点赞
收藏
分享

微信扫一扫

CSS实现几何图形

老榆 2022-03-17 阅读 23
csscss3html

css样式规则

实现一个正方形,正方形里有四种不同的颜色

图片样例:
在这里插入图片描述
实现代码如下:

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

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

实现上三角形

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

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

实现下三角形

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

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

实现右三角形

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

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

实现左三角形

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

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

开口向左的梯形

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

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

开口向右的梯形

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

    </div>
</body>
</html>
举报

相关推荐

0 条评论