首页HTML绘制五星红旗daim

HTML绘制五星红旗daim

时间: 2024-03-30 19:09:31 浏览: 237

以下是HTML代码实现五星红旗的绘制： ```html <!DOCTYPE html> <html> <head> <title>绘制五星红旗</title> <meta charset="UTF-8"> <style> .flag { width: 300px; height: 200px; background-color: red; position: relative; } .star { width: 60px; height: 60px; background-color: yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .star:before, .star:after { content: ""; width: 0; height: 0; border: 30px solid transparent; border-bottom-color: yellow; position: absolute; top: -15px; left: 0; transform: rotate(-35deg); } .star:after { transform: rotate(35deg); } .star1 { transform: rotate(18deg); top: 25%; left: 50%; } .star2 { transform: rotate(54deg); top: 25%; left: 68%; } .star3 { transform: rotate(90deg); top: 50%; left: 75%; } .star4 { transform: rotate(126deg); top: 75%; left: 68%; } .star5 { transform: rotate(162deg); top: 75%; left: 50%; } </style> </head> <body> <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> </body> </html> ``` 在浏览器中打开以上代码，即可看到五星红旗的绘制效果。

阅读全文