CSS3 Flower Bouquet

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

For simplicity and clarity of the code, I will skip the 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. Gradient and shadow understand all browsers (in this article I will allow myself not to consider Explorer as a browser, but if you like, you can draw it as well).

First, create a common billet for all 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 are set to hide irregularities, so to speak, “CSS anti-aliasing”.

Then the right petal:

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

Dimensions also should not cause questions. The upper right and lower left corners are rounded (border-top-right-radius and border-bottom-left-radius, respectively), and the whole block is rotated around its axis using transform.
')
The left petal is made by analogy with the right:

 .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 we will deal with the stems, at the beginning the 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 indents 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;} 

Leaves remained, the blank I got 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 help of indents and the 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. This is HTML:

  <div class="flower1"> <div class="stem1"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="centerleaf"></div> </div> <div class="flower2"> <div class="stem2"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="rightleaf"></div> </div> <div class="flower3"> <div class="stem3"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="leftleaf"></div> </div> 

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 to make it look 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 be limited to only three colors - the more, the better. For women ;)