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%;
}
This is a good instance to learn the position,border,以及僞類的應用,比較全面,沒有用到js,canvas,svg的使用,對後期學習canvas等等打應用都會有比較好的幫助
話又說回來,我們並不太滿足靜態的紅旗,需要把它做成動態的,並隨風飄揚的紅旗,如何做??大家有什麼意見嗎?當然,儘量不要用js,而是用css本身的特性...........
道法自然,一生二,二生三,三生萬物