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