How to Make Skewed Edges using CSS

How to Make Skewed Edges using CSS

Hello friends today we gonna learn about How to Make Skewed Edges using CSS. So read this article, How to Make Skewed Edges using CSS step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Make Skewed Edges using CSS

In this post, we are going to look at how to create a beveled edge (horizontal) effect on a web page. Basically it looks something like this:

Having a slightly beveled edge should make our web layout look less stiff and dull. To do this trick, we will use the pseudo-elements :: before and :: after and CSS3 Transform

back to menu ↑

Using pseudo elements

This technique uses the pseudo-elements :: before and :: after to corner the edges of the element. In this example we will adjust the bottom border.

.block {height: 400px; width: 100%; position: relative; background: linear gradient (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.

The transform origin specifies the coordinates of the element that we want to transform. In the example above, we specified the bottom left, putting the starting coordinates in the bottom left of the block.

The transformation: skewY (3deg); makes it: after block skewed or angled by 3 degrees. Since we specified the bottom left start coordinate, the bottom right side of the block will go up 3 degrees. If we swap the transformation origin to the bottom right, the bottom left corner will be increased 3 degrees instead.

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

back to menu ↑

Make it easier with Sass Mixin

To make this easier I created a Sass blend to add the beveled edges, minus the headache of dealing with the complexity of style rules. The following mixin allows you to quickly specify the side – top left, top right, bottom left, or bottom right – to be skewed.

@mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) {width: 100%; position: relative; background: linear gradient (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 == ‘topft’ {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 upper start coordinate and the extentThe last two variables specify the coordinate and the extent for the bottom side.

If you fill in up all four variables can be angled on either side – above and below – of the element.

Use the Sass @include syntax to insert the mixin into an element. Below are examples:

To add a skewed edge top left side:

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

To add a skewed edge bottom right side:

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

To add a skewed edge top left and bottom right side:

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

Below you can see the demo with the applied mixins. Change the check box to switch to a different style.

That is it!

back to menu ↑

How to Make Skewed Edges using CSS: benefits

  • The How to Make Skewed Edges using CSS tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Make Skewed Edges using CSS guide is free.

back to menu ↑

Faq

Tutorial summary of How to Make Skewed Edges using CSS

In this guide, we told you about the How to Make Skewed Edges using CSS; please read all steps so that you understand How to Make Skewed Edges using CSS in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Make Skewed Edges using CSS, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Make Skewed Edges using CSS tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Make Skewed Edges using CSS. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Make Skewed Edges using CSS, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Make Skewed Edges using CSS”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Make Skewed Edges using CSS, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo