通過CSS繪製五星紅旗
任務要求：
1、建立一個div作為紅旗旗面，用CSS控制其比例寬高比為3:2，背景為紅色。
2、再建立五個小的div，用CSS控制其大小和位置。
3、用CSS同時控制每個小div的大小、邊框和位置，同時配合旋轉，使其與父元素組成五角星。
4、分別用CSS控制每個五角星的平移、旋轉和縮放，直到五角星的大小、位置和方向均正確為止。
相關五角星大小和位置比例參見百度百科五星紅旗國旗製法說明（墨線法）：
重點：（1）CSS繪製指定大小的五角星；（2）如何由五角星幾何中心點位置獲取元素div的大小以及相關元素旋轉角度。（3）五角星幾何中心（其外接圓圓心）滿足墨線法繪製的位置要求。
tan18°=(√5-1)/√(10+2√5)≈0.32491969623291
0.5*tan18°=0.1624598481
繪製思路：
在進行相關程式碼書寫前，先構建一個完整的數學模型，並計算相關尺寸數值。先設定旗面1/4中每格為10x10大小（px），那麼旗面尺寸為300x200（px）。
大五角星外接圓半徑R=30px，小五角星外接圓半徑r=10px。根據CSS繪製五角星原理相關數學模型，可以計算出構成五角星的基礎三角形中相關邊框寬度的尺寸：
大五角星資料：
大五角星中構成三角形的邊框寬度值：20.73px、28.53px、28.53px；
轉換源基點資料：28.53px、9.27px；
外接圓圓心O座標（50px，50px）轉換為五角星的相對父元素上、左邊距距離：垂直方向為40.73px，水平方向為21.47px。
小五角星資料：
小五角星中構成三角形的邊框寬度值：6.91px、9.51px、9.51px；
轉換源基點資料：9.51px、3.09px；
四個小五角星外接圓圓心轉換為五角星的相對父元素上、左邊距距離：
由於採用絕對定位方式，即外接圓圓心O（轉換源基點）的座標與初始三角形左上角點之間的距離差。
（1）（100px，20px）→（90.49px，16.91px）
（2）（120px，40px）→（110.49px，36.91px）
（3）（120px，70px）→（110.49px，66.91px）
（4）（100px，90px）→（90.49px，86.91px）
從上到下，小五角星轉換為相對父元素上、下邊距距離的資料值以及偏轉角度（根據墨線法的方格和三角函式計算，前面值為計算經過小五角星的圓心與大五角星圓心的直線角度，後者為轉換的偏轉角度）依次為：
（1）arctan3/5≈30.96°→-48.96°
（計算過程：30.96+18=48.96，18°為五角星外部角的一半值）
（2）arctan1/7≈8.13°→-26.13°
（3）arctan2/7≈15.94°→-2.06°
（4）arctan4/5≈38.66°→20.66°
完整程式碼：
HTML結構
<div class='flag'>
<div class='pentagramMain'></div>
<div class='pentagram one'></div>
<div class='pentagram two'></div>
<div class='pentagram three'></div>
<div class='pentagram four'></div>
</div>
CSS程式碼
* {
border-width: 0;
}
.flag {
width:300px;
height:200px;
background:red;
position:relative;
}
.pentagramMain{
margin-top:40.73px;
margin-left:21.47px;
width: 0;
height: 0;
border-top-color: yellow;
border-left-color: transparent;
border-right-color: transparent;
border-top-width: 20.73px;
border-left-width: 28.53px;
border-right-width: 28.53px;
border-style: solid;
position: absolute;
}
.pentagramMain::before {
border-width:0;
content: '';
display: block;
width: 0;
height: 0;
border-top-color: yellow;
border-left-color: transparent;
border-right-color: transparent;
border-top-width: 20.73px;
border-left-width: 28.53px;
border-right-width: 28.53px;
border-style: solid;
position:absolute;
top:-20.73px;
left:-28.53px;
transform:rotate(72deg);
transform-origin:28.53px 9.27px;
}
.pentagramMain::after{
border-width:0;
content: '';
display: block;
width: 0;
height: 0;
border-top-color:yellow;
border-left-color: transparent;
border-right-color: transparent;
border-top-width: 20.73px;
border-left-width: 28.53px;
border-right-width: 28.53px;
border-style: solid;
position:absolute;
top:-20.73px;
left:-28.53px;
transform:rotate(-72deg);
transform-origin:28.53px 9.27px;
}
/* 小五角星 */
.pentagram{
width:0;
height:0;
position:absolute;
border-top:6.91px solid yellow;
border-left:9.51px solid transparent;
border-right:9.51px solid transparent;
}
.pentagram::before{
position:absolute;
width:0;
height:0;
content: '';
display: block;
border-top:6.91px solid yellow;
border-left:9.51px solid transparent;
border-right:9.51px solid transparent;
top:-6.91px;
left:-9.51px;
transform:rotate(72deg);
transform-origin:9.51px、3.09px;
}
.pentagram::after{
border-width:0;
content: '';
display: block;
width: 0;
height: 0;
border-top-color:yellow;
border-left-color: transparent;
border-right-color: transparent;
border-top:6.91px solid yellow;
border-left:9.51px solid transparent;
border-right:9.51px solid transparent;
border-style: solid;
position:absolute;
top:-6.91px;
left:-9.51px;
transform:rotate(-72deg);
transform-origin:9.51px、3.09px;
}
.one{
top:16.91px;
left:90.49px;
transform:rotate(-48.96deg);
}
.two{
top:36.91px;
left:110.49px;
transform:rotate(-26.13deg);
}
.three{
top:66.91px;
left:110.49px;
transform:rotate(-2.06deg);
}
.four{
top:86.91px;
left:90.49px;
transform:rotate(20.66deg);
}