TLDR: View the demo here
The html for this is fairly simple. We are going to create a few divs and wrap them inside links.
1 2 3 4 5
Creating The Icon
As we are using a link for the HTML we need the CSS to do all the work.
First start off by creating the style for the
This will create a rectangular box with text in the center.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Creating The Dog Ear
Ok, nothing to fancy so far but we still need to create the dog ear for the top right of the icon. To do this we will be using borders to create a triangle which floats above the
One unusual thing about borders is that the browser draws them at an angle. One side of the border is colored for the colour of it’s sides (top, right, bottom, left), and the rest are left transparent. You can set the border width to a higher value e.g. 32px.
1 2 3 4 5 6 7
And it will output a shape like this.
Using this technique the left and bottom borders can be set to
#888 & the top and right to
Here we have our shape now all we need to do is place it in the corner of our icon.
1 2 3 4 5 6 7 8
Moving The Dog Ear
First lets rename our
.file:before. This will make the element appear directly before the and element with the class
Now we have our dog ear awkwardly sitting inside of our icon before our text; nobody wants that.
To fix this we will make
.file-before use the
absolute positioning property. The element positioned relative to its first positioned parent element.
1 2 3 4 5
Well now there in the corner of the page, you can fix this by setting
.file’s position to relative.
1 2 3
Adding Some Colour
At the moment all of the elements look a bit drab; add some colour.
1 2 3 4 5
Animating The Icons
Now we have our icons finished, but they don’t do anything when you interact with them. We can use CSS3 transitions and transform to animate the shape when the user hover and clicks it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Now for the finishing touch: transitions.
1 2 3 4 5 6 7 8 9
Now you animations will smoothly transition between one state to another.
The Final Product
View the demo of what we have just created.