How to Create Skewed Edges With CSS

To add skewed edge on top-left side:

If you fill up all four variables you can angle both sides – top and bottom – of the element.

Using Pseudo Elements

That’s it!

 .block{ @include angle-edge(bottomright, 3deg); } 

To add skewed edge on top-left and bottom-right side:

 @mixin angle-edge($pos-top:null, $angle-top:null, $pos-btm:null, $angle-btm:null){ width: 100%; position: relative; background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); &::before, &::after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; transition: ease all .5s; } @if $pos-top{ &::before{ @if $pos-top == 'topleft'{ top: 0; transform-origin: right top; transform: skewY($angle-top); } @if $pos-top == 'topright' { top: 0; transform-origin: left top; transform: skewY(-$angle-top); } } } @if $pos-btm{ &::after{ @if $pos-btm == 'bottomleft' { bottom: 0; transform-origin: right bottom; transform: skewY(-$angle-btm); } @if $pos-btm == 'bottomright' { bottom: 0; transform-origin: left bottom; transform: skewY($angle-btm); } } } } 

There are four variables in the mixin. The first two variables, $pos-top and $angle-top, specify the top starting coordinate and the degree. The latter two variables specify the coordinate and the degree for the bottom side.

The 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 transform-origin to right bottom and the bottom-left corner will be raised 3 degrees instead.

This technique uses the pseudo-elements ::before and ::after to angle the element edges. In this example, we will be adjusting the bottom edge.

Make It Easier with Sass Mixin

 .block{ @include angle-edge(topleft, 3deg); } 

To add skewed edge on bottom-right side:

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 ::before and ::after and CSS3 Transform.

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:

The 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.

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.

Use the Sass @include syntax to insert the mixin to an element. You can see examples below:

You can add a solid color background or gradient to see the result.

 .block{ height: 400px; width: 100%; position: relative; background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); } .block::after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewY(3deg); } 

Let’s recap.

 .block{ @include angle-edge(topleft, 3deg, bottomright, 3deg); } 

Below is the demo with the mixins applied. Change the select box to toggle to another style.


Leave a Reply