How to create Slanted divisions or buttons

Ever thought of making a slanted division in your web page ? Well, you might find your answer in this article.

 Here, we would discuss 2 different approaches.

Approach 1:

Skew your division in required direction and Anti-skew its content in the opposite direction. This is the easiest method of all.

As an instance, consider thr followig HTML code :

<div class="something">
<div class="content">
Here goes your paragraph
</div>
</div> 

To slant the division from both sides, the CSS for the above code would be :

.something{
margin:0 auto;
color:white;
padding:5px;
background:red;
height:200px;
width:200px;
transform:skewX(-15deg); // important line
}

.content{
transform:skewX(15deg); // important line
}

Output of the above code is as follows:

This method is very useful for making buttons. Slanted buttons give a stunning look to your website.
However, this method is useful only if you have to slant the division from both the sides.
If you want slanted division from one side then refer approach 2.

Approach 2:

In this method we will use the pseudo element and give borders to it.
Here is an example...

<div class="something">
Here goes your paragraph
</div> 

CSS for above code is :

.something{
background:red;
color:white;
height:200px;
width:200px;
}

.something:after{
position:absolute;
top:8px;
left:208px;
content:'';
border-left:50px solid red;
border-right:50px solid transparent;
border-top:100px solid red;
border-bottom:100px solid transparent;

}
 

Output will be as follows:

If you did not understand the code, have a look at the following image. It shows all the borders given to pseudo element in different colors.
border-left is pink, border-right is green, border-top is black and border-bottom is yellow.

Thus, if you want to slant the right side in clockwise direction then use "after" pseudo element and make border-right and border-bottom as transparent. Then, give colours to border-left and border-top such that it matches the division colour (red in our case).

Similarly, if you want to slant the left side in clockwise direction then use "before" pseudo element and make border-left and border-top as transparent. Then, give colours to border-right and border-bottom such that it matches the division colour

One thing to note is that border-top and border-bottom must have equal widths and border-left and border-right must have equal widths. Otherwise a straight line will not be formed. Look at this example image. In case 1, border-left (50px) and border-right (70px) are of unequal widths. Whereas in case 2, border-top (90px) and border-bottom (120px) are of unequal widths. As a result, straight lines are not formed.

Let me know in the comment section below if you don't get the desired output.
Try manipulating all the properties so that you understand importance of each line.
Have a nice day :)