中國國旗是五星紅旗,它有特殊的寓意和意義。 如今,我們可以使用CSS3來設置五星紅旗的樣式,讓它在網頁上展現。
.flag { width: 300px; height: 200px; background-color: red; position: relative; } .flag:before { content: ""; width: 250px; height: 150px; background-color: yellow; position: absolute; top: 25px; left: 25px; } .flag:after { content: ""; width: 20px; height: 20px; background-color: yellow; border-radius: 50%; position: absolute; top: calc(50% - 10px); left: 40px; } .flag .star { width: 60px; height: 60px; background-color: yellow; position: absolute; transform: rotate(45deg); } .flag .star:before, .flag .star:after { content: ""; width: 0px; height: 0px; border: 30px solid yellow; border-radius: 50%; position: absolute; top: -30px; left: -30px; } .flag .star:before { border-top-color: transparent; border-right-color: transparent; } .flag .star:after { border-bottom-color: transparent; border-left-color: transparent; } .flag .star1 { transform: rotate(18deg); top: calc(50% - 30px); left: 60px; } .flag .star2 { transform: rotate(90deg); top: calc(50% - 30px); left: 110px; } .flag .star3 { transform: rotate(162deg); top: calc(50% - 30px); left: 60px; } .flag .star4 { transform: rotate(234deg); top: calc(50% - 30px); left: 110px; } .flag .star5 { transform: rotate(306deg); top: calc(50% - 30px); left: 60px; }
代碼的實現看似復雜,但細心的你一定可以理解,下面是五星紅旗的HTML代碼:
<div class="flag"> <div class="star star1"></div> <div class="star star2"></div> <div class="star star3"></div> <div class="star star4"></div> <div class="star star5"></div> </div>
在網頁中,這段代碼應該被放在<style>標簽內以保證其樣式生效。這樣我們就可以在頁面上看到一個美麗的五星紅旗了!
上一篇2個json字符串合并
下一篇2個json對比php