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