This was a rather easy experiment I did in an attempt to create a pure css image? icon? element. I took an image off of the web and measured the proportions of each section relative to one another and I think the final CSS one is close to perfect. I may revisit this in the future in an attempt to cut down the amount of code, we’ll see. Feel free to use this, modify it, ect, of course any links back to http://www.purecssicons.com are appreciated!

Feedback appreciated as this is my first/second attempt at this.

HTML

CSS

ul.droid {
	list-style:none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	}
.droid li {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	display:block;
}
.droid li.top {
	width:284px;
	height:85px;
	margin-bottom:12px;
}
.droid li.middle {
	width:284px;
	height:156px;
}
.droid li.bottom {
	width:284px;
	height:60px;
}
.leftantenna{
	display:block;
	width:6px;
	height:30px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	-webkit-border-top-left-radius:3px;
	-webkit-border-top-right-radius:3px;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
	background-color:#95c03b;
	-moz-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	transform:rotate(-30deg);
	position:absolute;
	left:85px;
	top:0;
}
.rightantenna{
	display:block;
	width:6px;
	height:30px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	-webkit-border-top-left-radius:3px;
	-webkit-border-top-right-radius:3px;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
	background-color:#95c03b;
	-moz-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	transform:rotate(30deg);
	position:absolute;
	right:85px;
	top:0;
}
.head{
	display:block;
	width:180px;
	height:70px;
	-moz-border-radius-topleft:90px 70px;
	-moz-border-radius-topright:90px 70px;
	-webkit-border-top-left-radius:90px 70px;
	-webkit-border-top-right-radius:90px 70px;
	border-top-left-radius: 90px 70px;
	border-top-right-radius: 90px 70px;
	background-color:#95c03b;
	position:absolute;
	left:52px;
	bottom:0;
}
.lefteye {
	display:block;
	width:20px;
	height:20px;
	background-color:#FFF;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	position:absolute;
	left:85px;
	top:45px;
}
.righteye{
	display:block;
	width:20px;
	height:20px;
	background-color:#FFF;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	position:absolute;
	right:85px;
	top:45px;
}
.torso{
	display:block;
	width:180px;
	height:156px;
	-moz-border-radius-bottomleft:20px;
	-moz-border-radius-bottomright:20px;
	-webkit-border-radius-bottomleft:20px;
	-webkit-border-radius-bottomright:20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	background-color:#95c03b;
	position:absolute;
	left:52px;
	top:0;
}
.leftarm {
	display:block;
	width:40px;
	height:120px;
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	border-radius:40px;
	background-color:#95c03b;
	position:absolute;
	left:0;
	top:0;
}
.rightarm {
	display:block;
	width:40px;
	height:120px;
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	border-radius:40px;
	background-color:#95c03b;
	position:absolute;
	left:244px;
	top:0;
}

.leftleg{
	display:block;
	width:40px;
	height:60px;
	-moz-border-radius-bottomleft:20px;
	-moz-border-radius-bottomright:20px;
	-webkit-border-radius-bottomleft:20px;
	-webkit-border-radius-bottomright:20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	background-color:#95c03b;
	position:absolute;
	left:85px;
	top:0;
}
.rightleg{
	display:block;
	width:40px;
	height:60px;
	-moz-border-radius-bottomleft:20px;
	-moz-border-radius-bottomright:20px;
	-webkit-border-radius-bottomleft:20px;
	-webkit-border-radius-bottomright:20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	background-color:#95c03b;
	position:absolute;
	right:85px;
	top:0;
}

View the live demo here.