Another Pure CSS3 Flower

Here is a nice flower graphic designed using only CSS3.
<html> <head> <style> body { background-color: lightblue; } .middle{ width:80px; height:80px; background:yellow; box-shadow: inset 0px 0px 20px 10px orange; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:2; position:relative; top: 85px; left:145px; } .petal{ width:80px; height:200px; background-color:blue; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:1; position:relative; top:-55px; left:143px; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); rotation:0deg; } .petal2{ width:80px; height:200px; background-color:blue; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:0; position:relative; top:-255px; left:143px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); rotation:45deg; } .petal3{ width:80px; height:200px; background-color:blue; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:-1; position:relative; top:-455px; left:143px; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); rotation:0deg; } .petal4{ width:80px; height:200px; background-color:blue; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; z-index:-2; position:relative; top:-655px; left:143px; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); rotation:135deg; } </style> </head> <body> <div class="middle"></div> <div class="petal"></div> <div class="petal2"></div> <div class="petal3"></div> <div class="petal4"></div> </body> </html>

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Download this code in plain text format here