Pure CSS3 Butterfly

A little butterfly drawn using just CSS3.
<html> <head> <style> body { background-color: lightblue; } #butterfly{ position: absolute; top: 200px; left: 172px; width: 256px; -webkit-transform:rotate(25deg); -moz-transform:rotate(25deg); rotation:25deg;} .wing { background-color: yellow; float: left; margin: 1px 1px 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; } #topleft { width: 120px; height: 150px; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; border-bottom: 2px solid darkred; border-right: 2px solid darkred; box-shadow: inset 0px 10px 40px 20px red,5px 5px 10px 0px black;} #topright { width: 120px; height: 150px; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; border-bottom: 2px solid darkred; border-left: 2px solid darkgred; box-shadow: inset 0px 10px 40px 20px red,5px 5px 10px 0px black;} #bottomleft { width: 120px; height: 200px; -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-top: 2px solid darkred; border-right: 2px solid darkred; box-shadow: inset 0px 10px 40px 20px red,5px 5px 10px 0px black;} #bottomright { width: 120px; height: 200px; -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-top: 2px solid darkred; border-left: 2px solid darkred; box-shadow: inset 0px 10px 40px 20px red,5px 5px 10px 0px black;} #center { position: absolute; left: 112px; top: 70px; background-color: brown; width: 20px; height: 200px; -moz-border-radius: 15px; -webkit-border-radius: 15px; z-index:2; box-shadow: inset 0px 0px 5px 2px black;} </style> </head> <body> <div id="butterfly"> <div id="topleft" class="wing"></div> <div id="topright" class="wing"></div> <div id="bottomleft" class="wing"></div> <div id="bottomright" class="wing"></div> <div id="center"> </div> </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