In this post, we’re going to look at how we can create a angled edge effect (horizontally) on a web page. Basically, it looks something like this:
Having a slightly angled edge should make our web layout look less rigid and dull. To do this trick, we will be using the pseudo-elements
::after and CSS3 Transform.
Using Pseudo Elements
This technique uses the pseudo-elements
::after to angle the element edges. In this example, we will be adjusting the bottom edge.
transform-origin specifies the coordinates of the element we want to transform. In the example above we specified
left bottom that will put the starting coordinates on the bottom-left side of the block.
transform: skewY(3deg); makes the
::after block skew or angle at 3 degrees. Since we specified the starting coordinate as bottom-left, the bottom-right of the block raises 3 degrees. If we swap the
right bottom and the bottom-left corner will be raised 3 degrees instead.
You can add a solid color background or gradient to see the result.
Make It Easier with Sass Mixin
To make this easier, I have created a Sass mixin to add the angled edges, minus the headaches from dealing with the complexities of style rules. With the following mixin you can quickly specify the side – top-left, top-right, bottom-left or bottom-right – to skew.
There are four variables in the mixin. The first two variables,
$angle-top, specify the top starting coordinate and the degree. The latter two variables specify the coordinate and the degree for the bottom side.
If you fill up all four variables you can angle both sides – top and bottom – of the element.
Use the Sass
@include syntax to insert the mixin to an element. You can see examples below:
To add skewed edge on top-left side:
To add skewed edge on bottom-right side:
To add skewed edge on top-left and bottom-right side:
Below is the demo with the mixins applied. Change the select box to toggle to another style.