五星紅旗是中華人民共和國的國旗,是中國人民自己設計和制定的,采用五角星形式,顏色以紅色為主。在 CSS 中,可以使用多種方式來實現五星紅旗的樣式。
.flag { width: 240px; /* 國旗寬度 */ height: 160px; /* 國旗高度 */ background-color: red; /* 背景為紅色 */ position: relative; /* 設置定位 */ } .flag:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: #FFDE00; /* 設置黃色背景 */ } .flag:after { content: ''; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 50%; background: #FFDE00; /* 設置黃色背景 */ } .star { width: 40px; /* 星星寬度 */ height: 40px; /* 星星高度 */ background-color: yellow; /* 星星顏色 */ border-radius: 50%; /* 圓形 */ position: absolute; /* 設置定位 */ left: 50%; /* 居中 */ top: 25%; /* 位置 */ transform: translate(-50%, -50%) rotate(-45deg); /* 旋轉45°并上下左右居中 */ } .star:before, .star:after { content: ''; width: 100%; height: 100%; position: absolute; background-color: yellow; /* 星星顏色 */ border-radius: 50%; /* 圓形 */ } .star:before { left: -50%; /* 第一個角 */ top: 0%; /* 距離第一個角位置 */ } .star:after { left: 0; /* 第二個角 */ top: -50%; /* 距離第二個角位置 */ }
通過這段 CSS 代碼,我們可以實現一個五星紅旗的效果,其中包括一個紅色背景和五顆黃色五角星。通過設置星星的旋轉角度和位置信息,可以讓整個國旗看上去更加美觀。