Pure CSS3 Waterdrop

A drop of water drawn using solely CSS3.
<html> <head> <style> #water{ position: absolute; top: 100px; left: 172px; width: 256px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); rotation:45deg;} .drop { background-color: lightblue; float: left; margin: 1px 1px 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; } #blue{ width: 100px; height: 90px; -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; border-top: 2px solid darkblue; border-left: 2px solid darkblue; box-shadow: inset 10px 0px 20px 10px blue, inset 10px 5px 5px 0px darkblue; } </style> </head> <body> <center> <div> <div id="water"> <div id="blue" class="drop"></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