首页用html+css写一个五星红旗

用html+css写一个五星红旗

时间: 2023-12-29 15:19:31 浏览: 161

好的，以下是用 HTML 和 CSS 写的五星红旗： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五星红旗</title> <style> .flag { width: 300px; height: 200px; background-color: red; position: relative; } .flag .star { position: absolute; width: 80px; height: 80px; background-color: yellow; transform: rotate(45deg); } .flag .star.top-left { top: 20px; left: 95px; clip-path: polygon(50% 0%, 60% 35%, 100% 35%, 65% 60%, 75% 100%, 50% 75%, 25% 100%, 35% 60%, 0% 35%, 40% 35%); } .flag .star.top-right { top: 20px; right: 95px; clip-path: polygon(50% 0%, 60% 35%, 100% 35%, 65% 60%, 75% 100%, 50% 75%, 25% 100%, 35% 60%, 0% 35%, 40% 35%); } .flag .star.bottom-left { bottom: 20px; left: 95px; clip-path: polygon(50% 100%, 40% 65%, 0% 65%, 35% 40%, 25% 0%, 50% 25%, 75% 0%, 65% 40%, 100% 65%, 60% 65%); } .flag .star.bottom-right { bottom: 20px; right: 95px; clip-path: polygon(50% 100%, 40% 65%, 0% 65%, 35% 40%, 25% 0%, 50% 25%, 75% 0%, 65% 40%, 100% 65%, 60% 65%); } </style> </head> <body> <div class="flag"> <div class="star top-left"></div> <div class="star top-right"></div> <div class="star bottom-left"></div> <div class="star bottom-right"></div> </div> </body> </html> ``` 效果如下： ![五星红旗](https://i.imgur.com/7Ij3yG3.png)

阅读全文