Bouquet of flowers on CSS3

A little background: on March 8 I posted here such a bouquet of flowers on my blog . Within a week, several people took an interest in its implementation - and until today answered quite briefly - using border-radius, inear-gradient and transform.
But if someone was interested, then why not write a detailed manual?
One of the requirements was the minimum number of objects per flower - this would allow using any number of colors with minor code changes. I got only 5 objects, including the stem and leaf, but you can draw more complex flowers if you want.

For simplicity and visualization of the code, I will skip prefixes, but I must warn that browsers on the WebKit engine (Safari and Chrome) do not understand the transform property without a prefix - they will have to additionally specify the -webkit-transform property. All browsers understand the gradient and shadow (within the framework of this article I allow myself not to consider the explorer a browser, but if you wish, you can draw for it as well).

First, create a common blank for all the petals:

.petalbottomright, .petalbottomleft, .petaltopcenter{
	background: #601719;
	background: linear-gradient(top, #da2b2a, #601719);
	border:1px solid #000;
	box-shadow: 1px 1px 4px #333;
}

Color and gradient should not cause questions, and the frame and shadow is set to hide irregularities, so to speak, “CSS anti-aliasing”.

Then the right lobe:

.petalbottomright{
	position:absolute;
	top:10px;
	width: 30px;
	height: 83px;
	border-top-right-radius: 74px;
	border-bottom-left-radius: 56px;
	transform: rotate(355deg);
}

Dimensions should not cause questions either. We round the right upper and left lower corners (border-top-right-radius and border-bottom-left-radius, respectively), and rotate the entire block around its axis using transform.

We do the left petal by analogy with the right one:

.petalbottomleft{
	position:absolute;
	top:10px;
	margin-left:30px;
	width: 36px;
	height: 86px;
	border-top-left-radius: 74px;
	border-bottom-right-radius: 46px;
	transform: rotate(12deg);
}

Central petal, the smallest:

.petaltopcenter{
	margin-left:15px;
	width: 40px;
	height: 40px;
	border-top-left-radius: 74px;
	transform: rotate(50deg);
}

Now let's deal with the stems, first harvesting:

.stem1, .stem2, .stem3{
	position:absolute;
	margin-left:30px;
	width: 10px;
	height: 180px;
	background: linear-gradient(left, #028e31, #601719);
}

Note that the gradient does not go from top to bottom, but from left to right.

And the indentation for the stems, it seemed to me that they should be made different:

.stem1{margin-top:70px;}
.stem2{margin-top:90px;}
.stem3{margin-top:80px;margin-left:23px;}

There were leaves, the blank I got was like this:

.leftleaf, .rightleaf, .centerleaf{
	position:absolute;
	width: 60px;
	height: 30px;
	background: linear-gradient(left, #028e31, #601719);
}

And the leaves themselves differ only in positioning with the indentation and radius of the corners:

.leftleaf {
	margin-top: 120px; 
	margin-left: 24px;
	border-bottom-left-radius: 32px;
	border-top-right-radius: 30px;
}
.rightleaf {
	margin-top: 170px;
	margin-left: -23px;
	border-bottom-right-radius: 36px;
	border-top-left-radius: 36px;
}
.centerleaf {
	margin-top: 120px;
	margin-left: -28px;
	border-bottom-right-radius: 38px;
	border-top-left-radius: 32px;
}

We already have flowers, it's time to collect them in a bouquet. Here is the HTML:

Each flower consists of three petals, a stem and a leaf, placed inside the containers flower1, flower2 and flower3. And we will arrange the flowers themselves at different angles, so that it looks like a bouquet:

.flower1{
	margin-left:82px;
	position:absolute;
	transform: rotate(357deg) scale(1,1.2);
	-webkit-transform: rotate(357deg) scale(1,1.2);
}
.flower2{
	margin-top:30px;
	position:absolute;
	transform: rotate(335deg) scale(1,1.2);
	-webkit-transform: rotate(335deg) scale(1,1.2);
}
.flower3{
	margin-left:172px;
	position:absolute;
	transform: rotate(20deg) scale(1.1,1.2);
	-webkit-transform: rotate(20deg) scale(1.1,1.2);
}

And of course, no one forces you to limit yourself to just three colors - the more of them, the better. For women ;)