Pure CSS3 Waterdrop
Created by CPUkiller on
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>
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
