为什么五角星上/左方的定位不是从0开始？

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2-9编程练习-五星红旗</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        main{
            width: 460px;
            height: 310px;
            background-color: red;
        position: relative ;
            margin: 0 auto;
        }
        div{
            width: 0;
            height: 0;
            position: absolute;
            border-bottom: 70px solid yellow;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            /* 以上是一个等腰三角形 */
            transform: rotate(35deg);/* 顺时针旋转30度，整体缩小70% */
        }
        div::before{
            width: 0;
            height: 0;
            position: absolute;
            content: "";
            border-bottom: 80px solid yellow;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            transform: rotate(-35deg);/* 逆时针旋转35度，并继承div的缩小属性 */
            top: -45px;
            left: -65px;
        }
        div::after{
            width: 0;
            height: 0;
            position: absolute;
            content: "";
            border-bottom: 70px solid yellow;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            transform: rotate(-70deg);/* 逆时针旋转70度，并继承div的缩小属性 */
            top: 3px;
            left: -105px;
        }
        .div1{
            top: 40px;
            left: -30px;
            transform: rotate(35deg) scale(0.4,0.4);
        }
        .div2{
            top: -5px;
            left: 50px;
            transform: rotate(-15deg) scale(0.15,0.15);
        }
        .div3{
            top: 25px;
            left: 80px;
            transform: rotate(0deg) scale(0.15,0.15);
        }
        .div4{
            top: 69px;
            left: 80px;
            transform: rotate(35deg) scale(0.15,0.15);
        }
        .div5{
            top: 100px;
            left: 50px;
            transform: rotate(55deg) scale(0.15,0.15);
        }
    </style>
</head>
<body>
    <main>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
    </main>
</body>
</html>