DIV 요소 하나로 덕로덕군을 써봤습니다.
나는 정말 라벨 하나만 사용했고 나머지는 모두 스타일시트를 사용했다.
크롬 DevTools에서 확인하면서 제작된 것이기 때문에 다른 브라우저에서는 모양이 바뀔 수 있습니다.

브라우저에서 보기

HTML

HTML은 이것밖에 없어요.

<div id="droid"> </div>

CSS

#droid{
    position: relative;
    height: 25em;
    width: 18em;
    border-radius: 9em 9em 0 0 ;
    margin: 0 auto 15em auto;
    background: -webkit-linear-gradient(top, transparent 9em,rgba(255,255,255,1) 9em, rgba(255,255,255,1) 9.5em, transparent 9.5em),
    -webkit-linear-gradient(left, rgba(100,255,100,1) 0%, rgba(0,255,0,1) 100%);        
}
#droid:before {
        content: '';
        position: absolute;
        width: 2em;
        height: 2em;
        border-radius: 50%;
        background: white;
        top: 5em;
        right: 4em;
        box-shadow:-8em 0 0 #fff,-8em 0 0 0.2em #0c0, -0 -0 0 0.2em #0c0
        ,-15em 8em 0 0.8em #4f4
        ,-15.2em 8.5em 0 0.8em #4f4
        ,-15.4em 9em 0 0.8em #4f4
        ,-15.6em 9.5em 0 0.8em #4f4
        ,-15.8em 10.0em 0 0.8em #4f4
        ,-16.0em 10.5em 0 0.8em #4f4
        ,-16.2em 11.0em 0 0.8em #4f4
        ,-16.4em 11.5em 0 0.8em #4f4
        ,7em 6em 0 0.8em #0f0
        ,7.5em 6em 0 0.8em #0f0
        ,8em 6em 0 0.8em #0f0
        ,8.5em 6em 0 0.8em #0f0
        ,9em 6em 0 0.8em #0f0
        ,9.5em 6em 0 0.8em #0f0
        ,-11em -3em 0 -0.5em #0f0
        ,-11.2em -3.2em 0 -0.5em #0f0
        ,-11.4em -3.4em 0 -0.5em #0f0
        ,-11.6em -3.6em 0 -0.5em #0f0
        ,-11.8em -3.8em 0 -0.5em #0f0
        ,-12.0em -4.0em 0 -0.5em #0f0
        ,-12.2em -4.2em 0 -0.5em #0f0
        ,-12.4em -4.4em 0 -0.5em #0f0
        ,2.2em -3.2em 0 -0.5em #0f0
        ,2.4em -3.4em 0 -0.5em #0f0
        ,2.6em -3.6em 0 -0.5em #0f0
        ,2.8em -3.8em 0 -0.5em #0f0
        ,3.0em -4.0em 0 -0.5em #0f0
        ,3.2em -4.2em 0 -0.5em #0f0
        ,3.4em -4.4em 0 -0.5em #0f0
        ,0 19em 0 1em #0f0
        ,0.1em 19.5em 0 1em #0f0
        ,0.2em 19.8em 0 1em #0f0
        ,0.3em 20.1em 0 1em #0f0
        ,0.4em 20.4em 0 1em #0f0
        ,0.5em 20.7em 0 1em #0f0
        ,0.6em 21.0em 0 1em #0f0
        ,0.7em 21.3em 0 1em #0f0
        ,0.8em 21.5em 0 1em #0f0
        ,-8em 19em 0 1em #4f4
        ,-8em 19.5em 0 1em #4f4
        ,-8em 20em 0 1em #4f4
        ,-8em 20.5em 0 1em #4f4
        ,-8em 21em 0 1em #4f4
        ,-8em 21.5em 0 1em #4f4
        ,-8em 22em 0 1em #4f4
        ,-8em 22.5em 0 1em #4f4
        ,-10em 28em 0 0em #222
        ,10em 25.6em 0 0em #222
        ;

}
#droid:after{
        content: '';
        position: absolute;
        width: 25em;
        height: 2em;
        background: #333;
        bottom: -6.6em;
        border-radius:3em;
        right: -em;
        -webkit-transform:rotate(-7deg);
        -moz-transform:rotate(-7deg);
        -o-transform:rotate(-7deg);
        transform:rotate(-7deg);
}

를 참고하십시오.
그리고 #droid:before는 각환으로 원을 만들어 왼쪽 눈을 그린다.
또한 #droid:before의 그림자를 사용하여 오른쪽 눈과 팔 등 다른 원을 사용하는 부분을 묘사했다.
이 안은 대부분 오른쪽 눈의 그림자라는 얘기다.
마지막으로 맨 아래의 슬라이더는 원각으로 사각 요소를 원형으로 빚고 #droid:after를 사용하여transform:rotate로 회전한다.
익히기 어려운 기술이지만 이런 방법을 기억해 두면 메뉴 같은 것도 이미지를 쓰지 않고 CSS만으로 디자인할 수 있어 편리하다.
가로 줄무늬를 사용하면 삼각형 등을 그릴 수 있다.
이 글은 Firespeed 기사를 토대로 세부 사항을 수정했다.