老师，我的五星红旗效果可以吗？

代码是自己写和调试的，细节方面还不够完美。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" manifest="cache.manifest">

   <head>
      <title>2-9-编程练习-五星红旗</title>
      <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <style type="text/css">
            h1
            {
                text-align: center;
            }

            div.ChinaFlag
            {
                margin: 20px auto;
                width: 900px;
                height: 600px;
                background-color: red;
            }

            .BigStar
            {
                position: relative;
                width: 0;
                height: 0;
                border-width: 60px 82.6px;
                border-style: solid;
                border-color: transparent transparent yellow transparent;
                transform: rotate(36deg) translate(64%, 4%);
            }


            .BigStar::before
            {
                display: block;
                position: absolute;
                top: -45px;
                left: -106px;
                content: "";
                width: 0;
                height: 0;
                border-width: 60px 82.6px;
                border-style: solid;
                border-color: transparent transparent yellow transparent;
                transform: rotate(-72deg);
            }

            .BigStar::after
            {
                display: block;
                position: absolute;
                top: -35px;
                left: -46px;
                content: "";
                width: 0;
                height: 0;
                border-width: 60px 82.6px;
                border-style: solid;
                border-color: transparent transparent yellow transparent;
                transform: rotate(72deg);
            }

            .SmallStar
            {
                position: relative;
                width: 0;
                height: 0;
                border-width: 60px 82.6px;
                border-style: solid;
                border-color: transparent transparent yellow transparent;
            }

            .SmallStar::before
            {
                display: block;
                position: absolute;
                top: -45px;
                left: -106px;
                content: "";
                width: 0;
                height: 0;
                border-width: 60px 82.6px;
                border-style: solid;
                border-color: transparent transparent yellow transparent;
                transform: rotate(-72deg);
            }

            .SmallStar::after
            {
                display: block;
                position: absolute;
                top: -35px;
                left: -46px;
                content: "";
                width: 0;
                height: 0;
                border-width: 60px 82.6px;
                border-style: solid;
                border-color: transparent transparent yellow transparent;
                transform: rotate(72deg);
            }

            .SmallStar:nth-child(1)
            {
                transform: translate(0%, -175%) scale(.4) rotate(14deg);
            }

            .SmallStar:nth-child(2)
            {
                transform: translate(64%, -274%) scale(.4) rotate(41deg);
            }

            .SmallStar:nth-child(3)
            {
                transform: translate(94%, -305%) scale(.4);
            }

            .SmallStar:nth-child(4)
            {
                transform: translate(90%, -314%) scale(.4) rotate(14deg);
            }
        </style>
   </head>

   <body>
        <h1>我爱我的祖国<br>反港独，爱中国，爱香港！</h1>
        <div class="ChinaFlag">
         <div class="BigStar">
            <div class="SmallStar"></div>
            <div class="SmallStar"></div>
            <div class="SmallStar"></div>
            <div class="SmallStar"></div>
         </div>
        </div>
   </body>

</html>

我学习太差被关起来了 2019-08-22

源自：CSS3转换 2-8 编程练习