CSS3

Drawing a Lego brick with HTML & CSS3

Drawing a Lego brick with CSS3

I wanted to challenge myself to draw something with CSS, using some properties at my disposal from CSS3 like gradients, rotation, skew and border-radius. I needed something relatively simple to attempt to draw, and as I frequently think about toys, a Lego brick seemed a good option :)

This is my first try, so this probably isn’t the shortest way (in terms of CSS and HTML markup length) of creating it. If I create a better version, I’ll be sure to post it here.

Lego brick drawn with HTML and CSS

View demo

The markup

I have created my brick with three <div> items and two lists. Each <div> makes up a side of the brick and each dot is a list item. I was considering using :before and :after, with just one <div>, but this is the way I have done it for the moment. View the demo and the markup below to see exactly how it was done:

View markup
CSS portion
/* Container */

div.brickContainer {
	position: relative;
	height: 260px;
}

/* Brick sides */

div.brickTop {
	position: absolute;
	left: 70px;
	top: 20px;
	width: 150px;
	height: 95px;
	background: #ffba00;
	transform: rotate(20deg) skew(-50deg);
	}
	
div.brickRight {
	position: absolute;
	left: 141px;
	top: 98px;
	width: 148px;
	height: 125px;
	background: #ff8a00;
	transform: rotate(-20deg) skew(-20deg);
}

div.brickLeft {
	position: absolute;
	left: 1px;
	top: 98px;
	width: 148px;
	height: 125px;
	background: #f90;
	transform: rotate(20deg) skew(20deg);
}

/* All dots */

ul {
	position: absolute;
	left: 70px;
	top: 20px;
}

ul li {
	position: absolute;
	list-style: none;
	border-top-left-radius: 40px 15px;
	border-top-right-radius: 40px 15px;
	border-bottom-left-radius: 40px 15px;
	border-bottom-right-radius: 40px 15px;
}

ul li.topLeft {
	left: -20px;
	top: 15px;
	width: 58px;
	height: 38px;
}

ul li.topRight {
	left: 50px;
	top: -10px;
	width: 55px;
	height: 35px;
}

ul li.bottomLeft {
	left: 48px;
	top: 38px;
	width: 60px;
	height: 40px;
}

ul li.bottomRight {
	left: 118px;
	top: 15px;
	width: 58px;
	height: 38px;
}

/* Tall dots */

ul.dotsTall li {
	background: linear-gradient(top, #ff8a00, #ffa200, #ff8a00);
}

/* Dot tops */

ul.dots li {
	height: 19px;
	background: #fc0;
}
HTML portion
<div class="brickContainer">
	<div class="brickTop"></div>
	<div class="brickLeft"></div>
	<div class="brickRight"></div>
	
	<ul class="dotsTall">
		<li class="topLeft"></li>
		<li class="topRight"></li>
		<li class="bottomLeft"></li>
		<li class="bottomRight"></li>
	</ul>
	
	<ul class="dots">
		<li class="topLeft"></li>
		<li class="topRight"></li>
		<li class="bottomLeft"></li>
		<li class="bottomRight"></li>
	</ul>
</div>