老师看一下作业

来源：2-13 编程练习

12332288

2022-07-31 17:03:04

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;尝试过的解决方式：
        }

        .flag {
            margin: 0 auto;
            margin-top: 50px;
            width: 600px;
            height: 400px;
            background-color: red;
        }

        /* 制作五角星 */
        .flag .star {
            width: 0;
            height: 0;
            border-top: 30px solid yellow;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: relative;
            transform: rotate(63deg) translate(90px,-15px)
        }

        .flag .star::before {
            content: "";
            width: 0;
            height: 0;
            border-bottom: 30px solid yellow;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: absolute;
            transform: rotate(51deg) translate(-42px,2px);

        }

        .flag .star::after {
            content: "";
            width: 0;
            height: 0;
            border-bottom: 30px solid yellow;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: absolute;
            transform: rotate(117deg) translate(-15px,42px);
        }
        .flag .star:nth-child(2){
            transform: rotate(10deg) translate(138px,-27px) scale(.7);
        }
        .flag .star:nth-child(3){
            transform: rotate(10deg) translate(138px,-27px) scale(.7);
        }
        .flag .star:nth-child(4){
            transform: rotate(10deg) translate(138px,-27px) scale(.7);
        }
        .flag .star:nth-child(5){
            transform: rotate(10deg) translate(138px,-27px) scale(.7);
        }
    </style>
</head>

<body>
    <div class="flag">
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>

    </div>
</body>

</html>
后面几个星星太难调了  而且我星星也没画标准 ，老师将就这样看一下有没有什么问题

写回答

1回答