<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>五星红旗</title> <style type="text/css"> *{ margin: 0; padding: 0; } .main{ width: 300px; height: 200px; background: #f00; padding: 20px; } .star{ width: 0; height: 0; border-top: 10px solid yellow; border-left: 17.32px solid transparent; border-right: 17.32px solid transparent; margin-top: 20px; position: relative; } .star::before{ content: ""; display: block; width: 0; height: 0; border-top: 10px solid yellow; border-left: 17.32px solid transparent; border-right: 17.32px solid transparent; position: absolute; top: -10px; left: -17.32px; transform: rotate(74deg); } .star::after{ content: ""; display: block; width: 0; height: 0; border-top: 10px solid yellow; border-left: 17.32px solid transparent; border-right: 17.32px solid transparent; position: absolute; top: -10px; left: -17.32px; transform: rotate(147deg); } .big{ transform: scale(1.8,1.8); position: absolute; top: 55px; left: 40px; } .small1,.small2,.small3,.small4{ transform: rotate(-45deg) scale(0.7,0.7); position: absolute; } .small1{ top: 10px; left: 80px; } .small2{ top: 40px; left: 110px; } .small3{ top: 80px; left: 110px; } .small4{ top: 110px; left: 80px; } </style> </head> <body> <div class="main"> <div class="star big"></div> <div class="star small1"></div> <div class="star small2"></div> <div class="star small3"></div> <div class="star small4"></div> </div> </body> </html>
