Pure CSS3 dragon

<html> <head> <style> .dragbody{ width: 400px; height: 220px; background: darkolivegreen; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 20%; border-bottom-right-radius: 40%; position: absolute; top: 250px; left: 300px; } .dragneck{ width: 150px; height: 250px; background: darkolivegreen; border-radius: 50%; position: absolute; top: 210px; left: 550px; } .dragtail{ width: 400px; height: 300px; border-left: solid darkolivegreen 80px; border-radius: 50%; position: absolute; top: 250px; left: 250px; -moz-transform:rotate(-10deg); } .draglegb{ width: 200px; height: 70px; background: darkolivegreen; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 20%; border-bottom-right-radius: 20%; position: absolute; top: 420px; left: 300px; } .draglegf{ width: 200px; height: 70px; background: darkolivegreen; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 20%; border-bottom-right-radius: 20%; position: absolute; top: 420px; left: 510px; } .draghead{ width: 160px; height: 160px; background: darkolivegreen; border-radius: 45%; position: absolute; top: 110px; left: 540px; } .dragmouth{ width: 100px; height: 100px; background: darkolivegreen; border-radius: 45%; position: absolute; top: 150px; left: 520px; } .dragmouth2{ width: 80px; height: 80px; background: darkolivegreen; border-radius: 45%; position: absolute; top: 160px; left: 510px; } .dragwing{ width: 400px; height: 300px; border-right: solid darkolivegreen 80px; border-radius: 50%; position: absolute; top: 150px; left: 00px; -moz-transform:rotate(-10deg); } .dragwing2{ width: 300px; height: 200px; border-right: solid darkolivegreen 80px; border-radius: 50%; position: absolute; top: 230px; left: 80px; -moz-transform:rotate(-30deg); } .dragwing3{ width: 400px; height: 300px; border-right: solid darkolivegreen 80px; border-radius: 50%; position: absolute; top: 80px; left: 30px; -moz-transform:rotate(0deg); } .dragwing4{ width: 200px; height: 200px; border-right: solid darkolivegreen 80px; border-radius: 50%; position: absolute; top: 260px; left: 200px; -moz-transform:rotate(-50deg); } .dragmouth2{ width: 80px; height: 80px; background: darkolivegreen; border-radius: 45%; position: absolute; top: 160px; left: 510px; } .drageye{ width: 35px; height: 15px; background: yellow; border-top-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 160px; left: 570px; z-index: 2; } .drageyespot{ width: 15px; height: 15px; background: black; border-top-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 160px; left: 580px; z-index: 3; } .dragear{ width: 50px; height: 40px; background: darkolivegreen; border-top-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 120px; left: 660px; z-index: 2; -moz-transform:rotate(-15deg); } </style> </head> <body> <div class="dragbody"></div> <div class="dragneck"></div> <div class="dragtail"></div> <div class="draglegb"></div> <div class="draglegf"></div> <div class="draghead"></div> <div class="dragmouth"></div> <div class="dragmouth2"></div> <div class="dragwing"></div> <div class="dragwing2"></div> <div class="dragwing3"></div> <div class="dragwing4"></div> <div class="drageye"></div> <div class="drageyespot"></div> <div class="dragear"></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