Css-фигуры: лепесток

Из одного div с помощью border-radius легко можно сделать лепесток:

С помощью box-shadow — ещё один:

С помощью :before — ещё парочку, и получается 4 лепестка:

А добавив :after и transform можно сделать 6 лепестков:

Для понятности покрасим лепестки в разные цвета. Красный — исходный div, зеленый — :before, оранжевый — :after, желтые — box-shadow этих трех элементов.

Цветок с 4 или 6-ю лепестками на основе одного элемента! : ) Причем с помощью border-radius можно управлять формой лепестков.

Теперь сделаем лепестки овальной формы с помощью псевдо-элементов и transform. В основе два div'а:

Тем же способом можно сделать лепестки в форме капелек, а также добавить к ним рамки или тени:

В этом случае нельзя обойтись одним элементом, потому что тень объекта нельзя повернуть.