Pure CSS3 Clover

A clover drawn using just CSS3.
<html> <head> <style> body { background-color: #9cf; } #clover{ position: absolute; top: 100px; left: 172px; width: 256px; -webkit-transform:rotate(25deg); -moz-transform:rotate(25deg); rotation:25deg;} .petal { background-color: lightgreen; float: left; margin: 1px 1px 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; } #topleft { width: 100px; height: 100px; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom: 2px solid darkgreen; border-right: 2px solid darkgreen; box-shadow: inset 0px 10px 40px 20px green,5px 5px 10px 0px black;} #topright { width: 100px; height: 100px; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom: 2px solid darkgreen; border-left: 2px solid darkgreen; box-shadow: inset 10px 0px 40px 20px green,5px 5px 10px 0px black;} #bottomleft { width: 100px; height: 100px; -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; border-top: 2px solid darkgreen; border-right: 2px solid darkgreen; box-shadow: inset 0px 10px 40px 20px green,5px 5px 10px 0px black;} #bottomright { width: 100px; height: 100px; -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; border-top: 2px solid darkgreen; border-left: 2px solid darkgreen; box-shadow: inset 10px 10px 40px 20px green,5px 5px 10px 0px black; } </style> </head> <body> <center> <div id="background"> <div id="clover"> <div id="topleft" class="petal"></div> <div id="topright" class="petal"></div> <div id="bottomleft" class="petal"></div> <div id="bottomright" class="petal"></div> </div> </div> </center> </body> </html>

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