老师检查一下ovo~

来源：2-13 编程练习

江伍德

2021-04-12 23:55:28

<!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>
        .box{
            width: 500px;
            height: 300px;
             background-color: red; 
            position: relative;
            margin: 90px auto;
        }
        /* 公共类 */
        .triangle{            
            position: absolute;
            width: 0;
            height: 0;
            border: 100px solid transparent;
            transform: rotate(45deg);
        }

        /*  */
        .box-1{
            position: relative;
            width: 255px;
            height: 255px;
            top: -36px;
            left: -40px;
            transform: scale(0.4);
            /* background-color: orchid */
        }

        /*  */
        .r-1{
            border-top-color: yellow ; 
            transform: rotate(-296deg);
            top: -31px;
            left: -27px;
        }
        /*  */
         .r-2{
            border-top-color: yellow ; 
            transform: rotate(290deg);
            top: -40px;
            left: 79px;
        }

        /*  */
         .sr-1{
            position: absolute;
            top: 94px;
            left: 3px;
            transform: rotate(2deg);
            z-index: 999;
        }

        /*  */
        .sr-2{
            position: absolute;
            top: 233px;
            left: 35px;
            transform: rotate(295deg);
         }
         /* 遮罩 */
        .cl-1{
             position: absolute;
             top: 150px;
             left: 90px;
             width: 70px;
             height: 70px;
             background-color:red;
             z-index: 0;
         }

        /* 缩小 */
        .xiao{
            width: 270px;
            height: 270px;
            /* background-color: orchid; */
            transform: scale(0.3); 
         }

         /* 不能旋转 */
         .box-2{

             position: absolute;
             top: -143px;
             left: 148px;
         }
         .box-3{
             position: absolute;
             top: -55px;
             left: 208px;
         }
         .box-4{
             position: absolute;

             top: 48px;
             left: 204px;
         }
         .box-5{
             position: absolute;
             top: 145px;
             left: 153px;
         }



    </style>
</head>
<body>
    <div class="box">
        <!--大星星-->
        <div class="box-1">

            <div class=" sr-1">
                <div class="r-1 triangle"></div>
                 <div class="r-2 triangle"></div>
            </div>

            <div class=" sr-2">
                <div class="r-1 triangle "></div>   
            <!--  -->
            </div>
                <!--小星星  -->
                 <div class="cl-1"></div>


                <div class="box-2  xiao">
                    <div class=" sr-1">
                        <div class="r-1 triangle"></div>
                         <div class="r-2 triangle"></div>
                    </div>

                    <div class=" sr-2">
                        <div class="r-1 triangle "></div>                
                    </div>
                    <!--  -->
                     <div class="cl-1"></div>
                </div>

                <div class="box-3 xiao">
                    <div class=" sr-1">
                        <div class="r-1 triangle"></div>
                         <div class="r-2 triangle"></div>
                    </div>

                    <div class=" sr-2">
                        <div class="r-1 triangle "></div>                
                    </div>
                    <!--  -->
                     <div class="cl-1"></div>        
                </div>

                <div class="box-4 xiao">
                    <div class=" sr-1">
                        <div class="r-1 triangle"></div>
                         <div class="r-2 triangle"></div>
                    </div>

                    <div class=" sr-2">
                        <div class="r-1 triangle "></div>                
                    </div>
                    <!--  -->
                     <div class="cl-1"></div>

                </div>

                <div class="box-5 xiao">
                    <div class=" sr-1">
                        <div class="r-1 triangle"></div>
                         <div class="r-2 triangle"></div>
                    </div>

                    <div class=" sr-2">
                        <div class="r-1 triangle "></div>                
                    </div>
                    <!--  -->
                     <div class="cl-1"></div>
                </div>

        <!--  -->
        </div>
    <!--  -->
    </div>

</body>
</html>