用html5制作企鹅,无HTML元素构建的企鹅图标

CSS

语言：

CSSSCSS

确定

body {

background: #ccc;

padding: 50px;

}

body:before {

content: "Abdullah AbuSall (abdullah-abusall.com)" "\aNo HTML Tags Added";

display: block;

width: 320px;

position: absolute;

top: 10px;

line-height: 2em;

font-family: monospace;

}

head {

display: block;

width: 200px;

height: 250px;

background: #FFF;

margin: 10px auto;

border: 30px solid #171717;

border-bottom-left-radius: 150px 100px;

border-top-left-radius: 150px 300px;

border-top-right-radius: 150px 300px;

border-bottom-right-radius: 150px 100px;

position: relative;

text-indent: -9999em;

}

head script,

head script:before {

content: "";

display: block;

width: 10px;

height: 20px;

background: #000;

border-radius: 50%;

position: absolute;

top: 40px;

left: 70px;

}

head script:before {

left: auto;

top: 0;

right: -50px;

}

head meta:first-of-type {

display: block;

width: 75px;

height: 30px;

background: #FF7F2A;

border-bottom-left-radius: 100%;

border-bottom-right-radius: 100%;

position: absolute;

bottom: 50%;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

head meta:last-of-type,

head meta:last-of-type:before {

content: "";

display: block;

width: 75px;

height: 75px;

background: #171717;

border-bottom-left-radius: 150px 100px;

border-top-left-radius: 150px 300px;

border-bottom-right-radius: 150px 100px;

position: absolute;

top: 30%;

left: 0;

-webkit-transform: translateX(-90px) rotate(40deg);

transform: translateX(-90px) rotate(40deg);

}

head meta:last-of-type:before {

left: auto;

top: -200px;

right: -140px;

border-top-left-radius: 0;

border-top-right-radius: 150px 300px;

-webkit-transform: translateX(90px) rotate(-80deg);

transform: translateX(90px) rotate(-80deg);

}

head link:first-of-type,

head link:first-of-type:before {

content: "";

display: block;

width: 75px;

height: 75px;

background: #FF7F2A;

border-bottom-left-radius: 150px 100px;

border-top-left-radius: 150px 300px;

border-top-right-radius: 150px 300px;

border-bottom-right-radius: 150px 100px;

position: absolute;

top: 100%;

left: -10px;

z-index: -1;

-webkit-transform: rotate(20deg);

transform: rotate(20deg);

}

head link:first-of-type:before {

left: auto;

top: -50px;

right: -150px;

-webkit-transform: rotate(-40deg);

transform: rotate(-40deg);

}