首页 > Web开发 > 详细

用CSS编写多种常见的图形

时间:2020-02-03 19:57:08      阅读:87      评论:0      收藏:0      [点我收藏+]

用CSS编写多种常见的图形

正方形与长方形

这个是最简单的,直接上代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            margin-bottom: 20px;
            background: pink;
        }
        /*长方形*/
        .div div:nth-child(1){
            height: 100px;
            width: 200px;
        }
        /*正方形*/
        .div div:nth-child(2){
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="div">
        <div></div>
        <div></div>
    </div>
</body>
</html>

等腰三角形

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .div{
            height: 0;
            width: 0;
            border-width: 100px;
            border-style: solid;
            border-color: skyblue green pink brown;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>

上面代码会看到四个等腰三角形,把其余三个颜色改为透明即可

.div{
    height: 0;
    width: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent transparent pink transparent;
}

等边三角形

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            height: 0;
            width: 0;
        }
        .div{
            
            border-left: 100px solid pink;
            border-right: 100px solid skyblue;
            border-top: 173.2px solid green;
            border-bottom: 173.2px solid brown;
        }
        .div1{
            border-top: 100px solid pink;
            border-bottom: 100px solid skyblue;
            border-left: 173.2px solid green;
            border-right: 173.2px solid brown;
        }
    </style>
</head>
<body>
    <div class="div"></div>
    <div class="div1"></div>
</body>
</html>

等边三角形的关键比例是1:1.732

上面代码中173.2px这部分的三角形就是等边三角形

圆形

一个正方形再加上border-radius: 50%;就可以了

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            height: 100px;
            width: 100px;
            border-radius: 50%;
            background: pink;
        }
        
    </style>
</head>
<body>
    <div></div>
</body>
</html>

椭圆

长方形加上border-radius: 50%即可

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            height: 100px;
            width: 200px;
            border-radius: 50%;
            background: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

圆角矩形

长方形加上border-radius进行调整即可

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            height: 100px;
            width: 200px;
            border-radius: 20px;
            background: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

中间透明的规则图形

图形的背景透明,再加上边框颜色即可,以圆形为例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            height: 100px;
            width: 100px;
            border-radius: 50%;
            background: transparent;
            border: 20px solid pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

直角梯形

margin三个参数时分别代表,上,左右,下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            width: 100px;
            border-width: 0px 10px 10px 0px;
            border-style: none solid solid;
            border-color: transparent transparent #111;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

改变下面代码的第二和第三个参数

border-width: 0px 10px 10px 0px;

第二个参数是直角梯形的倾斜度,第三个是高度,同样也会影响倾斜度,这个自己去调试一下会更直接明白。

如果将宽度设置为0px的话,将会成为一个直角三角形,再加那两个参数可以写出任何直角三角形,不再局限于等腰三角形和等边三角形。

任意直角三角形的CSS代码

div{
    width: 0px;
    border-width: 0px 100px 100px 0px;
    border-style: none solid solid;
    border-color: transparent transparent #111;
}

等腰直角

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            width: 100px;
            border-width: 0px 100px 100px 100px;
            border-style: solid;
            border-color: transparent transparent #111;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

任意三角形

在等腰梯形的基础上,将宽度设为0,再改变border-width的那三个三数,可以调整出各种内角和为180的三角形。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            width: 100px;
            border-width: 0px 100px 100px 100px;
            border-style: solid;
            border-color: transparent transparent #111;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

一个比较有意思的图形

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
                width: 100px;
                border-width: 229px 100px 100px 100px;
                border-style: solid;
                border-color: #111 transparent rgba(0,0,0,.2)
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

扇形

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
                width: 0;
                height: 0;
                border-radius: 50%;
            
                border-width: 100px 100px 100px 100px;
                border-style: solid;
                border-color: transparent transparent transparent #000;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

平行四边形

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: #000;
            transform: skew(20deg);
            margin: 20px; /*非关键代码*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

用CSS编写多种常见的图形

原文:https://www.cnblogs.com/tourey-fatty/p/12256800.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!