请老师检查

来源：2-13 编程练习

Erick1029

2022-01-26 13:28:29

相关代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 此处写代码*/
        *{
            padding: 0;
            margin: 0;
        }

        .box{
            width: 300px;
            height: 200px;
            background: rgb(252, 15, 15);
            margin: 100px auto;
            position: relative;
        }
        .box .box1{
            position: absolute;
            left: 30px;
            top: 50px;
            border: 30px solid transparent;
            border-top:20px solid yellow;
        }

        .box .box1::before{
            content: "";
            position: absolute;
            left: -46px;
            top: -31px;
            border: 30px solid transparent;
            border-top:20px solid yellow;
            transform: rotate(70deg);
        }

        .box .box1::after{
            content: "";
            position: absolute;
            left: -41px;
            top: -47px;
            border: 30px solid transparent;
            border-top:20px solid yellow;
            transform: rotate(145deg);
        }

        .box .one{
            transform: scale(0.9);
        }

        .box .two{
            left: 70px;
            top: 5px;
            transform: rotate(25deg) scale(0.3);
        }
        .box .three{
            left: 88px;
            top: 25px;
            transform: rotate(45deg) scale(0.3);
        }
        .box .four{
            left: 88px;
            top: 55px;
            transform: rotate(65deg) scale(0.3);
        }
        .box .five{
            left: 70px;
            top: 75px;
            transform: rotate(85deg) scale(0.3);
        }
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div class="box">
        <div class="box1 one"></div>
        <div class="box1 two"></div>
        <div class="box1 three"></div>
        <div class="box1 four"></div>
        <div class="box1 five"></div>
    </div>
</body>
</html>

写回答

1回答