用CSS畫五星紅旗的步驟：
1.畫一個3:2的紅色背景
2.畫黃色星星，用縮放和旋轉，用定位讓它擺放好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>star</title>
<style type="text/css">
.background{
width: 300px;
height: 200px;
background-color: red;
margin: 0 auto;
position: relative;
}
.star{
width: 0;
height: 0;
color: yellow;
margin: 50px 0;
position: relative;
display: block;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid yellow;
-moz-transfrom:rotate(35deg);
-webkit-transform:rotate(35deg);
-ms-transform:rotate(35deg);
-o-transform:rotate(35deg);
}
.star:before{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid yellow;
position: absolute;
top: -45px;
left: -65px;
color: white;
display: block;
content: "";
-moz-transform:rotate(-35deg);
-webkit-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
-o-transform:rotate(-35deg);
}
.star:after{
width: 0;
height: 0;
display: block;
position: absolute;
color: yellow;
top: 3px;
left: -105px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid yellow;
content: "";
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
}
.position{
transform: scale(0.4);
position: absolute;
top:-27px;
left: -36px;
}
.star1{
transform: scale(0.1) rotate(20deg);
position: absolute;
top:-54px;
left: 32px;
}
.star2{
transform: scale(0.1) rotate(60deg);
position: absolute;
top:-32px;
left: 52px;
}
.star3{
transform: scale(0.1) rotate(100deg);
position: absolute;
top:-6px;
left: 50px;}
.star4{
transform: scale(0.1) rotate(140deg);
position: absolute;
top:11px;
left: 29px;
}
</style>
</head>
<body>
<div class="background">
<div class="position">
<div class="star"></div>
</div>
<div class="star1">
<div class="star"></div>
</div>
<div class="star2">
<div class="star"></div>
</div>
<div class="star3">
<div class="star"></div>
</div>
<div class="star4">
<div class="star"></div>
</div>
</div>
</body>
</html>