请老师检查一下，谢谢！

来源：2-8 编程练习

努力的刘同学

2020-02-26 14:32:53

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>国旗</title>
  <style>
    /* 清楚默认 */
    *{
      margin: 0;
      padding: 0;
    }
    .main{
      width: 600px;
      height: 400px;
      background: red;
      margin: 100px auto 0;
      position: relative;
    }
    .sub_d{
      width: 0px;
      height: 0px;
      border-width: 40px 60px 40px 60px;
      border-color: yellow transparent transparent transparent;
      border-style: solid;
      position: absolute;
    }

    .sub_d::after,
    .sub_d::before{
      display: block;
      content: "";
      width: 0px;
      height: 0px;
      border-width: 40px 60px 40px 60px;
      border-color: yellow transparent transparent transparent;
      border-style: solid;
      position: absolute;
      top: -70px;
    }
    .sub_d::after{
      transform: rotate(75deg) ;
      left: -79.6px;
      top: -57px;
     
    }
    .sub_d::before{
      transform: rotate(-71deg);
      left: -38px;
      top: -55px;

    }

    .div_1{
      top: 80px;
      left: 30px;
    }
    .div_2{
      transform: scale(.3) rotate(20deg);
      top: 5px;
      left: 120px;
    }
    .div_3{
      transform: scale(.3) rotate(40deg);
      top: 40px;
      left: 150px;
    }
    .div_4{
      transform: scale(.3) rotate(60deg);
      top: 85px;
      left: 150px;
    }
    .div_5{
      transform: scale(.3) rotate(80deg);
      top: 125px;
      left: 130px;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="div_1 sub_d"></div>
    <div class="div_2 sub_d"></div>
    <div class="div_3 sub_d"></div>
    <div class="div_4 sub_d"></div>
    <div class="div_5 sub_d"></div>
  </div>
</body>
</html>

写回答

1回答