Designing an eye in CSS3

An article by admin

Today I have designed an eye in pure CSS3. You may have probably read my previous post about Designing Nepalese flag in CSS3. In that Nepalese flag was designed different DIVs. But here eye have been made with single div and using pseudo elements before and after.

You can see the demo below:

CSS code can be seen below:

#eye:before,
#eye:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50px;
    width: 60px;
    height: 60px;
    border: 20px solid white;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
#eye:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50px;
    width: 60px;
    height: 60px;
    border: 20px solid white;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

I hope that this was helpful.