The house that CSS built.

Posted 26th Nov 2018

Following on from our previous post on how to create a panda icon… Here’s one of a house using only CSS and a few HTML elements.

The trickiest parts of this build was the slanted roof, and the triangle shaped gable. Try and guess how we achieved the results below before delving into the code for the answer.


Let’s break it down

We thought we would go into a few of the sections of this little build and explain how some of the effects were achieved.

The roof shape

Any good roof needs to be slanted. For this effect we used the CSS transform: skew() property. What this does is squashes any quadrilateral into a sort of rhombus shape. Here’s an example:


The idea was to use two of these and skew them in opposite directions, making the roof shape. I’ve added an outline to each section so you can see how the fit together.


The only thing left for the roof is to style it properly…

The roof stripes

This one is much simpler than you might think, it uses a repeating gradient trick. Using the background property, you can set a ‘repeating-linear-gradient’. The one you see on the roof uses this line of code.

background: repeating-linear-gradient(0deg, #c7a07a, #c7a07a 5px, #b37724 5px, #b37724 10px)


The gable

The front top of the house is built simply using 2 triangle, one positioned slightly above the other. A triangle in CSS can be easily created using what’s commonly known as the border trick. Borders in CSS actually meet at a diagonal, this means to you can utilse this to create a triangle shape.


The rest of the house uses similar techniques, with various square and circle shapes positioned to create each of the elements. Have a look at the full code above and have a go yourself at creating a CSS house.