Как создать структуру с цветочным подобным в CSS и HTML ⇐ CSS

[Anonymous]

Я пытаюсь создать изображение, подобное следующему, используя комбинацию HTML и CSS, но я не могу заставить «лепестки» вращаться по середине. Код: < /p>

Код: Выделить всё

.flower{
height: 600px;
width: 600px;
margin: 20px;
display:  flex;
align-items:  center;
justify-content:  center;
position:  relative;
}

.mid{
width:  200px;
height: 200px;
border-radius:  50%;
background: #35414d;
z-index:  4;
}

.petal{
position:  absolute;
left: 40px;
width: 180px;
height: 180px;
border-radius: 50%;
background:  #b5a9d4;
}

.petal.p1 {
transform: rotate(22.5deg);
z-index: 5;
}

.petal.p2 {
transform: rotate(50deg);
z-index: 5;
}

.petal.p3 {
transform: rotate(100deg);
z-index: 5;
}< /code>

Какие значения преобразования будут работать лучше всего, чтобы получить 8 лепестков для окружения центрального круга?

Подробнее здесь: https://stackoverflow.com/questions/761 ... s-and-html