请老师检查谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flag</title>
    <style type="text/css">
    * { margin: 0; padding: 0;}
    .flag {
        width: 600px; height:400px; margin: 100px auto; background-color: red;
        position: relative;
    }
    /* 怎么计算才能画一个比较标准的五角星？ */
    .star {
        width: 0; height: 0;
        border: 12px solid transparent; border-bottom: 35px solid yellow;
        position: absolute;
        top: 38px;
        left: 100px;        
    }
    .star::before {
        content: "";
        width: 0; height: 0;
        border: 41px solid transparent; border-left: 25px solid yellow;
        /* 定位的时候有什么方法吗？ */
        position: absolute;
        top: -14px;
        left: -23px;
        transform: rotate(-59deg);
    }
    .star::after {
        content: "";
        width: 0; height: 0;
        border: 41px solid transparent; border-right: 25px solid yellow;
        position: absolute;
        top: -14px;
        left: -42px;
        transform: rotate(59deg);
    }
    .star2{
        /* 为什么rotate是围绕打五星在旋转而不是自己在转动？ */
        /* 定位的原理是什么？ */
        transform: rotate(-29deg) translate(100px, 15px) scale(0.5);
    }
    .star3{
        transform: rotate(2deg) translate(130px, 15px) scale(0.5);
    }
    .star4{
        transform: rotate(11deg) translate(134px, 45px) scale(0.5);
    }
    .star5{
        transform: rotate(69deg) translate(136px, -35px) scale(0.5);
    }
    </style>
</head>
<body>
    <div class="flag">
        <div class="star star1"></div>
        <div class="star star2"></div>
        <div class="star star3"></div>
        <div class="star star4"></div>
        <div class="star star5"></div>
    </div>
</body>
</html>

慕UI4313976 2020-03-24

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