HTML5中用css盒模型绘画图形

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #div1{
            width: 0px;
            height: 0px;
            background: lightblue;
            border: 150px solid rgb(255, 255, 255);
            border-bottom-color:lightblue；

        }

        #div2{
            width: 900px;
            height: 420px;
            background: lightgreen;
            border-top-left-radius: 210px;
            border-bottom-left-radius: 210px;
            border-top-right-radius: 210px;
            border-bottom-right-radius: 210px;
        }
        #div3{
            width: 20px;
            height: 20px;
            border: 50px rgb(226, 139, 212) solid;
            border-radius: 50%;
            border-bottom-color: lightblue;
            border-left-color: lightpink;
            border-right-color:lightgreen ;

 

        }
    </style>
</head>
<body>
<div id="div1"></div>
<hr>
<div id="div2"></div>
<hr>
<div id="div3"></div>
<hr>
</body>
</html>

比如这个三角形是由一个常规的正方形变化来的

三角形的顶点部分就是代码中的

        #div1{
            width: 0px;
            height: 0px;
          此时的高和宽都为0
             此时集中为一点
          

        }

        #div1{
         
            background: lightblue;
            此时默认背景为lightblue色
            border: 150px solid rgb(255, 255, 255);
            然后定义border的大小为150px白色，此时整个被白色覆盖
            border-bottom-color:lightblue;
            然后从这个点到整个大盒子的底部所连接形成的图型呈一个三角形，然后定义为lightblue色，此时把白色覆盖出现了一个lightblue的三角形
          

        }

而border的解释
如图

如果想要得到等腰梯形的话

修改代码如下

   #div1{
            width: 150px;
            height:0px;
            background: lightblue;
            border: 150px solid rgb(255, 255, 255);
            border-bottom-color:lightblue;
          

        }

只需要width改为150px

此时就组成了上底为150px，下底为300的等腰梯形

border的解释如下图

如图所示的图形就是由一个长方形变化来的

具体过程就是四个角进行添加圆角边框属性

要呈现这个效果添加圆角边框的值为

大长方形的一半

具体代码如下

        #div2{
            width: 900px;
            height: 420px;
            background: lightgreen;
            border-top-left-radius: 210px;
            border-bottom-left-radius: 210px;
            border-top-right-radius: 210px;
            border-bottom-right-radius: 210px;
        }
3

要实现如上图的效果几个颜色不同的扇形组合成的图像
首先要实现如图所示的效果

代码如下

#div3{

width: 50px;

height: 50px;

border: 50px rgb(226, 139, 212) solid;

}

然后再进行添加圆角边框属性

border-radius: 50%;

效果如下

最后添加上几个不同的颜色属性就可以了

代码如下

#div3{

border-bottom-color: lightblue;

border-left-color: lightpink;

border-right-color:lightgreen ;

}

就可以得到如下的效果了啦

posted @ 2021-11-03 21:31 doudou帅阅读(224) 评论(0) 收藏举报

刷新页面返回顶部

doudou帅

HTML5中用css盒模型绘画图形

公告