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.
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.
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, $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.
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:
@include angle-edge(topleft, 3deg);
To add skewed edge on bottom-right side:
@include angle-edge(bottomright, 3deg);
To add skewed edge on top-left and bottom-right side:
It’s near the end of 2015 and we keep the freebies coming. This compilation contains amazing branding mockups, plenty of good-looking templates and some pretty cool text effects.
Also in the list are UI tools, kits, styles, amazing and diverse icons, stylish fonts, web templates in PSD format, unique WordPress themes and plugins and more. To get the resources, visit the source via the links provided. If these aren’t to your liking, please check out our earlier compilations at these links: