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.
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:
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>
No idea how I stumbled on this, but I like it. I assume the browser support is a bit rubbish though sadly!
Yes, I’m afraid so, at the moment! It’s but a bit of fun 🙂