<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>