老师，感觉效果不太对，帮忙看一下哪里有问题或者可以优化的地方

来源：2-13 编程练习

多盐少糖

2021-04-10 13:03:40

感觉旋转的时候五角星有些变形，不知道为什么

相关代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 此处写代码*/
        /*背景红色 */
        .background{
            width:300px;
            height:200px;
            background-color:red;
            position:relative;
        }
        /*五角星统一样式 */
        .star{
           width:0; 
           height:0;
           border:10px solid transparent;
           border-top-color:yellow;
           transform:scale(1.5,1);
           position: absolute;
           left: 50px;
           top: 50px;
        }
        /* 五角星统一样式伪类 */
        .big:before,.small:before{
           position: absolute;
           left: -3px;
           top: -13px;
           display: block;
           content: '';
           width:0; 
           height:0;
           border:8px solid transparent;
           border-left-color:yellow;
           transform:rotate(13deg) scale(1,1.5)  ;
        }
        /* 五角星统一样式伪类 */
        .big:after,.small:after{
            position: absolute;
           left: -13px;
           top: -13px;
           display: block;
           content: '';
           width:0; 
           height:0;
           border:8px solid transparent;
           border-right-color:yellow;
           transform:rotate(-13deg) scale(1,1.5)  ;
        }
        /* 大星星位置和大小 */
        .big{
            left: 50px;
            top: 60px;
            transform:scale(3.5,3)  translate(0px,5px);
        }
        /* 小星星位置 */
        .small{
            left:100px;
            top: 40px;

        }
    /* 小星星位置和旋转 */
        .number1{
            transform:scale(1.5,1) rotate(14deg) translate(-10px,-25px);   
        }
        .number2{
            transform:scale(1.5,1) rotate(37deg) translate(7px, -7px);   
        }
        .number3{
            transform:scale(1.5,1) rotate(16deg) translate(23px, 26px);   
        }
        .number4{
            transform:scale(1.5,1) rotate(10deg) translate(20px, 63px);   
        }


    </style>
</head>
<body>
    <!-- 背景 -->
    <div class="background">
        <!-- 大五角星 -->
        <div class="big star"></div>
        <!-- 小五角星 -->
        <div class="number1 small star"></div>
        <div class="number2 small star"></div>
        <div class="number3 small star"></div>
        <div class="number4 small star"></div>
    </div>
</body>
</html>