Burung dalam sangkar, guna CSS

Gambar ini adalah gambar print screen (png), manakala gambar asal (di bawah) dihasilkan dengan kod HTML

Demo

HTML view ▼

<div class="labu">
<div class="burung"></div>
</div>
<style>
.labu* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.labu {
height: 70vh;
font-size: 2vmin;
background: #fafafa;
display: flex;
align-items: center;
justify-content: center;
}
.burung {
height: 35em;
width: 30em;
position: relative;
background:
radial-gradient( ellipse 100% 100%,
transparent calc( 50% - .3em ),
#000 calc( 50% - .2em ),
#000 calc( 50% - .1em ),
transparent 50%
) right calc( 50% - 1.7em ) bottom 30.2em / 1.7em 1.7em,
radial-gradient( ellipse 100% 100%,
transparent calc( 50% - .3em ),
#000 calc( 50% - .2em ),
#000 calc( 50% - .1em ),
transparent 50%
) left 50% bottom 30.4em / 2.4em 2.4em,
radial-gradient( ellipse 100% 100%,
transparent calc( 50% - .3em ),
#000 calc( 50% - .2em ),
#000 calc( 50% - .1em ),
transparent 50%
) left calc( 50% - 1.8em ) bottom 30.2em / 1.7em 1.7em,
radial-gradient( ellipse 100% 100% at 50% 100%,
transparent calc( 50% - .25em ),
#000 calc( 50% - .2em ),
#000 calc( 50% - .1em ),
transparent 50%
) left 50% bottom 23.7em / 4.92em 14em,
radial-gradient( ellipse 100% 100% at 50% 100%,
transparent calc( 50% - .3em ),
#000 calc( 50% - .2em ),
#000 calc( 50% - .1em ),
transparent 50%
) left 50% bottom 23.7em / 9.38em 14em,
radial-gradient( ellipse 100% 100% at 50% 100%,
transparent calc( 50% - .3em ),
#000 calc( 50% - .2em ),
#000 calc( 50% - .1em ),
transparent 50%
) left 50% bottom 23.7em / 13.87em 13.87em,
linear-gradient( 
#000, #000
) left 50% bottom 27.35em / 11.3em .2em,
linear-gradient( 
#000, #000
) left 50% bottom 23.51em / 13.8em .2em,
linear-gradient( 
#000, #000
) right calc( 50% - 2.3em ) bottom 10.6em / .2em 13em,
linear-gradient( 
#000, #000
) right calc( 50% - 4.55em ) bottom 10.6em / .2em 13em,
linear-gradient( 
#000, #000
) right calc( 50% - 6.8em ) bottom 10.6em / .2em 13em,
linear-gradient( 
#000, #000
) left 50% bottom 10.6em / .2em 19.9em,
linear-gradient( 
#000, #000
) left calc( 50% - 2.3em ) bottom 10.6em / .2em 13em,
linear-gradient( 
#000, #000
) left calc( 50% - 4.55em ) bottom 10.6em / .2em 13em,
linear-gradient( 
#000, #000
) left calc( 50% - 6.8em ) bottom 10.6em / .2em 13em,
linear-gradient( 
#000, #000
) left 50% bottom 9.2em / 13.8em 1.4em,
radial-gradient( ellipse 100% 100%,
#000 37%,
#FFF 40%,
#FFF 47%,
transparent 50%
) left calc( 50% - 2.3em ) bottom calc( 50% + 2.3em ) / 2.1em 2.1em,
linear-gradient(
#111, #111
) left calc( 50% - 5em ) bottom 19em / .2em 3em,
linear-gradient( 45deg,
transparent 31%,
#293d47 31%, 
#000 61%,
transparent 61%
) left calc( 50% + 1em ) bottom 50% / 12em 9.16em,
radial-gradient( ellipse 50% 100% at 100% 0,
#68767d 50%,
transparent 50.5%
) left calc( 50% - 10.7em ) bottom 6.45em / 23em 13em,
linear-gradient(
#68767d, #68767d
) left calc( 50% + 1em ) bottom 12.95em / 1em 1em,
linear-gradient( 45deg,
transparent 40%,
#000 40%, 
#000 45%,
transparent 45%
) left calc( 50% + 7.2em ) bottom 10em / 9em 9em,
linear-gradient(
#293d47, #293d47
) left calc( 50% - 5.9em ) bottom 20.3em / 5em .2em,
radial-gradient( ellipse 100% 100% at 50% 110%,
#68767d 49%,
transparent 51%
) left calc( 50% - 5em ) bottom 20.4em / 7em 4em,
radial-gradient( ellipse 100% 100% at 50% -10%,
#68767d 49%,
transparent 51%
) left calc( 50% - 5em ) bottom 16.5em / 7em 4em,
linear-gradient( -45deg,
transparent calc( 50% - .1em ),
#888 calc( 50% - .1em ), 
#888 calc( 50% + .1em ),
transparent calc( 50% + .1em )
) left calc( 50% - 1.1em ) bottom 10.6em / 2.25em 2.25em,
linear-gradient( -45deg,
transparent calc( 50% - .1em ),
#888 calc( 50% - .1em ), 
#888 calc( 50% + .1em ),
transparent calc( 50% + .1em )
) right calc( 50% - 1.2em ) bottom 10.5em / 2.25em 2.25em,
linear-gradient( 
#313131, #313131
) left 50% bottom 9em / 17.5em .2em,
linear-gradient(
#313131, #313131
) right 8.1em bottom 6.2em / 1.5em 2.8em,
linear-gradient(
#313131, #313131
) left 8.1em bottom 6.2em / 1.5em 2.8em,
radial-gradient( ellipse 100% 100%,
#313131 48%,
transparent 50%
) left 50% bottom 6.75em / 4.5em 1.65em,
linear-gradient(
#333, #222
) left 50% bottom 6.2em / 16.8em 2.8em,
linear-gradient( 
#313131, #535353
) left 50% bottom 6em / 19.5em .2em,
linear-gradient( 
#555, #333
) right 8.75em bottom 4.65em / .2em 1.5em,
linear-gradient( 
#555, #333
) right 8em bottom 4.65em / .2em 1.5em,
linear-gradient( 
#555, #333
) right 7.3em bottom 4.65em / .2em 1.5em,
linear-gradient( 
#555, #333
) left 8.75em bottom 4.65em / .2em 1.5em,
linear-gradient( 
#555, #333
) left 8em bottom 4.65em / .2em 1.5em,
linear-gradient( 
#555, #333
) left 7.3em bottom 4.65em / .2em 1.5em,
linear-gradient( 
#555, #333
) left 50% bottom 5.2em / 8.5em .2em,
linear-gradient(
#293d47, #293d47
) left 50% bottom 4.65em / 19em 1.5em,
linear-gradient( 
#555, #555 
) left 50% bottom 4.45em / 22em .2em,

linear-gradient( 90deg,
#e3e3e3, #e3e3e3
) right 7.8em bottom 2.35em / .8em 2.1em,

linear-gradient( 90deg,
#e3e3e3, #e3e3e3
) right 12.4em bottom 2.35em / .8em 2.1em,

linear-gradient( 90deg,
#e3e3e3, #e3e3e3
) left 12.4em bottom 2.35em / .8em 2.1em,
linear-gradient( 90deg,
#e3e3e3, #e3e3e3
) left 7.8em bottom 2.35em / .8em 2.1em,
linear-gradient(
#e3e3e3, #535353
) left 50% bottom 2.35em / 21.5em 2.1em,
linear-gradient( 
#555, #555 
) left 50% bottom 2.15em / 25em .2em;
background-repeat: no-repeat;
}
.burung::before {
content: '';
display: block;
position: absolute;
height: 4.5em;
width: 7em;
border-radius: 1.5em 0 0 2em;
background: 
linear-gradient(
#000, #000
) 0 calc( 50% + .7em ) / 4.5em .2em,
linear-gradient(
#000, #000
) 0 calc( 50% - .8em ) / 2.2em .2em,
linear-gradient(
#000, #000
) 4.45em 50% / .2em 100%,
linear-gradient(
#000, #000
) 2.2em 50% / .2em 100%,
linear-gradient(
#000, #000
) 0 50% / .1em 100%,
linear-gradient( 45deg,
#2d3b42 30%,
#324047 60%
);
background-repeat: no-repeat;
left: 50%;
top: 50%;
margin-top: -1em;
box-shadow: 0 0 1em 0 rgba(0,0,0,.5);
clip-path: polygon(
-1em -1em,
2.4em 0,
calc( 100% - .1em ) 100%,
-1em calc( 100% + 1em )
);
}
</style>

Tutup