comment 0

Moon with CSS3

Crescent Moon with CSS3 only.

HTML

<div id="crescent-moon"></div>

CSS

body {
    margin: 30px;
    background: #efefef;
}
#crescent-moon {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    -ms-box-shadow: 17px 17px 0 0 #CD0001;
    -o-box-shadow: 17px 17px 0 0 #CD0001;
    -webkit-box-shadow: 17px 17px 0 0 #CD0001;
    box-shadow: 17px 17px 0 0 #CD0001;
    -ms-transform: rotate(100deg);
    /* IE 9 */
    -webkit-transform: rotate(100deg);
    /* Chrome, Safari */
    -o-transform: rotate(100deg);
    transform: rotate(100deg);
    margin: 30px 0 0 120px;
}

Fiddle with Example