JSFiddle - React, Tailwind, and code Playground
HTML
<div class="crow">
<div class="head"></div>
<div class="legs"></div>
</div>
<div class="crow flying dead">
<div class="head"></div>
<div class="legs"></div>
</div>
<div class="crow dead">
<div class="head"></div>
<div class="legs"></div>
</div>
CSS
.crow {
height:90px;
width:180px;
-moz-border-radius:0 0 180px 180px;
-webkit-border-radius:0 0 180px 180px;
border-radius:0 0 180px 180px;
background:#000;
position:relative;
margin:150px 150px 250px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.crow.flying {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.crow.flying.dead {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv; /*IE*/
}
.crow.flying:before {
content:"\25D7\25D7";
color:#000;
font-size:200px;
line-height:0;
letter-spacing:-35px;
position:absolute;
top:-51px;
left:-10px;
-webkit-transform: rotate(-15deg) skew(15deg);
-moz-transform: rotate(-15deg) skew(15deg);
-ms-transform: rotate(-15deg) skew(15deg);
-o-transform: rotate(-15deg) skew(15deg);
}
.crow:after {
content:"";
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 60px solid #000;
border-bottom: 70px solid transparent;
position:absolute;
top:-110px;
left:-50px;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
}
.crow.flying:after, .crow.dead:after {
content:"";
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 60px solid #000;
border-bottom: 100px solid transparent;
position:absolute;
top:-60px;
left:-100px;
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
}
.head {
width: 40px;
height: 40px;
border:30px...