五星紅旗,是中華人民共和國的國旗,它是中國人民在長期的斗爭中爭取來的象征自由和獨立的力量,下面我們來一起用html的代碼來繪制一面五星紅旗:
<!-- 定義一個父級容器 --> <div class="flag"> <!-- 紅色背景 --> <div class="red"></div> <!-- 五星 --> <div class="star-container"> <div class="star1"></div> <div class="star2"></div> <div class="star3"></div> <div class="star4"></div> <div class="star5"></div> </div> </div>
上面的代碼中,我們使用了一個div元素作為父級容器,并對其添加了一個flag類,用于設置一些基本樣式。其內部分別包括紅色背景和五顆五星,分別使用red和star-container類來進行樣式設置。
/* 定義基本樣式 */ .flag { width: 200px; height: 133px; position: relative; } .red { width: 100%; height: 66.6%; background-color: #ff0000; } .star-container { width: 55%; height: 33.3%; position: absolute; top: 33.3%; left: 22.5%; } /* 定義五個五角星 */ .star1, .star3, .star5 { width: 25%; height: 100%; float: left; position: relative; } .star2, .star4 { width: 25%; height: 100%; float: right; position: relative; } /* 五角星外輪廓 */ .star1::before, .star2::before, .star3::before, .star4::before, .star5::before { content: ''; width: 0; height: 0; position: absolute; top: 0; left: 0; border-right: 6px solid transparent; border-left: 6px solid transparent; border-bottom: 10px solid #FFDE00; transform: rotate(35deg); } /* 五角星內部填充 */ .star1::after, .star2::after, .star3::after, .star4::after, .star5::after { content: ''; width: 0; height: 0; position: absolute; top: 0; left: 8px; border-right: 3px solid transparent; border-left: 3px solid transparent; border-bottom: 15px solid #FFDE00; transform: rotate(-35deg); } /* 五角星位置 */ .star1 { transform: rotate(36deg); } .star2 { transform: rotate(-36deg); } .star3 { transform: rotate(-108deg); } .star4 { transform: rotate(108deg); } .star5 { transform: rotate(0deg); }
上述代碼中,我們通過設置div元素的寬度和高度,使其成為一面標準的五星紅旗。在五星的設置中,我們使用了before和after偽元素來為五星創建外輪廓和內部填充。通過對五星的位置進行旋轉,我們成功地繪制了一面完整的五星紅旗!
上一篇jquery++圖走馬燈
下一篇css 圖片復選框