Another Pure CSS3 Flower
Created by CPUkiller on
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>
Last updated by ynori7 on
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Download this code in plain text format here
