html添加花瓣,html border-radius这个水平半径和垂直半径怎么整啊？我的这个花瓣怎么弄整齐啊？求带...

HTML>

无标题文档

.all{

width: 800px;

height: 800px;

margin: 50px auto;

background-color: #E2E2E2;

}

.box{

width: 420px;

height: 420px;

/*margin: 50px auto;*/

transition: 4s ease-in-out;

/*background-color: #D1D1D1;*/

}

.box div{

width: 200px;

height: 200px;

margin: 5px;

/*border: 1px solid #000;*/

float: left;

}

.box div:nth-child(1){

border-radius:200px 57px 1px 250px / 100px 230px  1px 149px;

background-color: #11E611;

overflow: hidden;

}

.box div:nth-child(2){

border-radius:57px 200px 250px 1px / 230px 100px 149px 1px;

background-color: #EDED0B;

}

.box div:nth-child(3){

border-radius:250px 1px 57px 200px / 230px 1px  149px 100px;

background-color: #ED1313;

}

.box div:nth-child(4){

border-radius:1px 250px 57px 200px / 1px 149px 230px 100px;

background-color: #0F0FEA;

}

.box:hover{transform:rotate(720deg);}