请老师检查，谢谢

来源：2-8 编程练习

ChildMu

2020-02-06 16:12:18

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>five-stars-flag</title>
    <style type="text/css">
        .flag{
            width: 600px;
            height: 400px;
            background-color: red;
            position: relative;
            margin: 0 auto;
        }
        .star{
            width: 0;
            height: 0;
            border-right: 60px solid transparent;
            border-left:60px solid transparent;
            border-top: 40px solid yellow;
            position: absolute;
            left: 60px;
            top: 80px;
        }
        .star:before,
        .star:after{
            display: block;
            width: 0;
            height: 0;
            content: "";
            border-right: 60px solid transparent;
            border-left: 60px solid transparent;
            border-top: 40px solid yellow;
            position: absolute;
        }
        .star:before{
            left: -60px;
            top: -40px;
            transform: rotate(75deg);
        }
        .star:after{
            transform: rotate(-73deg);
            top: -40px;
            left: -55px;
        }
.star1{
    transform: scale(0.33) rotate(30deg);
    left: 170px;
    top: 15px;
}
.star2{
    transform: scale(0.33) rotate(45deg);
    left: 220px;
    top: 60px;
}
.star3{
    transform: scale(0.33);
    left: 220px;
    top: 120px;
}
.star4{
    transform: scale(0.33) rotate(30deg);
    left: 170px;
    top: 160px;
}
    
    </style>
</head>
<body>
    <div class="flag">
        <div class="star"></div>
        <div class="star1 star"></div>
        <div class="star2 star"></div>
        <div class="star3 star"></div>
        <div class="star4 star"></div>
    </div>
</body>
</html>

写回答

1回答