版权声明:如需转载请联系本人[email protected] https://blog.csdn.net/u012491646/article/details/80718853
web中画五星红旗的方法有很多种,可以用canvas画图,svg中的多边形属性画,但是本人为了扎实好css属性知识,只借助css方法进行五星红旗的制作,以供大家思考.
本文思路如下:
1.选取一个div元素(任何元素)根据css中的块元素的border属性,做好单个三角形的制作,同时为了能够复用,可以用在任意一个非块元素上,必须设置display:block,使元素作为块元素
2.根据css的伪类:after以及:before属性,在1中的元素上构造两个旋转(+-68deg)的三角形
3.根据1,2得出的三角形进行拼接,并调整好属性,画好单个五角星
4.当我们画好五角星之后,就可以根据transform:scale 方法,放大缩小并创建其他的4个小五角星
5.最后在html中构建一个四方形,作为旗面
这里需要注意的是,为了做到五星红旗与可视窗口的同比例自适应协调变化,所有的元素的width,height等等均以vw作为单位(vw是根据可视窗口的宽度width作为自适应)
代码如下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="css/five.css"></>
</head>
<body>
<div class="flag">
<div class="fiveangle middle flag0"></div>
<div class="fiveangle small flag1"></div>
<div class="fiveangle small flag2"></div>
<div class="fiveangle small flag3"></div>
<div class="fiveangle small flag4"></div>
</div>
</body>
</html>
css/five.css部分为
.fiveangle{
position: relative;
display: block;
height: 0vh;
width: 0vw;
left:0vw;
border:8vw solid transparent;
border-top: 5vw solid yellow;
border-left: 7vw solid transparent;
border-bottom: 0vw;
}
.flag{
height:30vw;
width: 50vw;
position:relative;
background-color:red;
}
.fiveangle:before{
position: absolute;
display: block;
top: -5vw;
height: 0vw;
width: 0vw;
border: 7vw solid transparent;
border-top: 6vw solid yellow;
border-left: 7vw solid transparent;
border-right: 7vw solid transparent;
border-bottom: 0vw;
left:-6.5vw;
transform: rotate(68deg);
content:'';
}
.fiveangle:after{
position: absolute;
display: block;
top:-5vw;
height: 0vw;
width: 0vw;
border:7vw solid transparent;
border-top: 6vw solid yellow;
border-right: 7vw solid transparent;
border-left: 7vw solid transparent;
border-bottom: 0vw;
left:-6vw;
transform: rotate(-68deg);
content: '';//这里的content必须添加,否则无法显示
}
.fiveangle.middle{
transform:scale(0.5);
}
.fiveangle.small{
transform: scale(0.2);
}
.flag0{
top:17%;
}
.flag1{
position: absolute;
left:12%;
top:0%;
}
.flag2{
position: absolute;
left:18%;
top:10%;
}
.flag3{
position: absolute;
left:18%;
top:25%;
}
.flag4{
left:12%;
position: absolute;
top:35%;
}
The page can be show below:
This is a good instance to learn the position,border,以及伪类的应用,比较全面,没有用到js,canvas,svg的使用,对后期学习canvas等等打应用都会有比较好的帮助
话又说回来,我们并不太满足静态的红旗,需要把它做成动态的,并随风飘扬的红旗,如何做??大家有什么意见吗?当然,尽量不要用js,而是用css本身的特性...........
道法自然,一生二,二生三,三生万物