HTML结构
<div class="container"> <h2>五星红旗</h2> <div class="redFlag"> <div class="fiveStar"> <div class="bigStar"></div> <div class="smallStar1-container"> <div class="smallStar"></div> </div> <div class="smallStar2-container"> <div class="smallStar"></div> </div> <div class="smallStar3-container"> <div class="smallStar"></div> </div> <div class="smallStar4-container"> <div class="smallStar"></div> </div> <div> </div> </div>
CSS样式
h2{ text-align:center; } .container{ margin:0 auto; margin-top:30px; width:600px; } .redFlag{ width:600px; height:400px; background:red; border:1px solid transparent; } .fiveStar{ margin-left:50px; margin-top:20px; position:relative; border:1px solid transparent; height:100%; position:relative; } .bigStar{ width:0; height:0; position:relative; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:35px solid yellow; transform:rotate(35deg); margin-left:10px; margin-top:55px; } .bigStar:before{ width:0; height:0; content:""; position:absolute; border-left:15px solid transparent; border-right:15px solid transparent; border-bottom:40px solid yellow; transform:rotate(-35deg); left:-32px; top:-23px; } .bigStar:after{ width:0; height:0; content:""; position:absolute; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:35px solid yellow; transform:rotate(-70deg); top:1px; left:-52px; } .smallStar1-container{ position:absolute; left:137px; top:20px; transform:rotate(23deg); } .smallStar2-container{ position:absolute; left:172px; top:60px; transform:rotate(45deg); } .smallStar3-container{ position:absolute; left:165px; top:109px; transform:rotate(68deg); } .smallStar4-container{ position:absolute; left:137px; top:145px; transform:rotate(90deg); } .smallStar{ width:0; height:0; position:relative; border-left:17px solid transparent; border-right:17px solid transparent; border-bottom:12px solid yellow; transform:rotate(35deg); } .smallStar:before{ width:0; height:0; content:""; position:absolute; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:13px solid yellow; transform:rotate(-35deg); left:-10px; top:-8px; } .smallStar:after{ width:0; height:0; content:""; position:absolute; border-left:17px solid transparent; border-right:17px solid transparent; border-bottom:12px solid yellow; transform:rotate(-70deg); top:0; left:-17px; }
效果图
