html css 画五角星,CSS画五角星画的不正

2-3

*{

margin: 0;padding: 0;

}

.backgroundOne{

width:300px;

height:200px;

background-color:#f00;

border-radius: 15px;

}

.backgroundOne > div {

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid #ff0;

border-left: 100px solid transparent;

-webkit-transform: rotate(35deg);

-moz-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

transform: rotate(35deg);

}

.backgroundOne > div::after{

width: 0px;

height: 0px;

display: block;

border-right: 100px solid transparent;

border-bottom: 70px solid #ff0;

border-left: 100px solid transparent;

content: '';

-webkit-transform: rotate(-70deg) translate(29px,-130px);

-moz-transform: rotate(-70deg) translate(29px,-130px);

-ms-transform: rotate(-70deg) translate(29px,-130px);

-o-transform: rotate(-70deg) translate(29px,-130px);

transform: rotate(-70deg) translate(29px,-130px);

}

.backgroundOne > div::before{

height: 0px;

width: 0px;

display: block;

content: '';

border-right: 30px solid transparent;

border-bottom: 80px solid #ff0;

border-left: 30px solid transparent;

-webkit-transform: rotate(-35deg) translate(-30px,-80px);

-moz-transform: rotate(-35deg) translate(-30px,-80px);

-ms-transform: rotate(-35deg) translate(-30px,-80px);

-o-transform: rotate(-35deg) translate(-30px,-80px);

transform: rotate(-35deg) translate(-30px,-80px);

}

.backgroundOne > div:nth-child(1) {transform: translate(-50px, 20px) rotate(35deg) scale(0.3,0.3);}

.backgroundOne > div:nth-child(2) {transform: translate( 0px, -80px) rotate(60deg) scale(0.1,0.1);}

.backgroundOne > div:nth-child(3) {transform: translate( 22px, -125px) rotate(80deg) scale(0.1,0.1);}

.backgroundOne > div:nth-child(4) {transform: translate( 22px, -162px) rotate(35deg) scale(0.1,0.1);}

.backgroundOne > div:nth-child(5) {transform: translate( 0px, -210px) rotate(65deg) scale(0.1,0.1);}

各位大神指点下，这个五角星为何不正。