CSS HTML

How to make a diagonal div with CSS

December 22, 2021

How to make a diagonal div with CSS

In this article we’ll learn how to make a diagonal div with CSS, without having to use external libraries or JS, quickly and conveniently.

diagonal div with CSS cover

What’s up programmer, okay? Let’s learn how to build a diagonal div with HTML and CSS! 

Depending on the layout, there is a need to create formats that are not so common on the web

As is the case with a diagonal div, which is rarely used

The good news: it’s perfectly possible to create this diagonal format with just CSS

So let’s go to a practical example, this will be our HTML:

<!DOCTYPE html>
<html>
 <head>
  <title>Diagonal div with CSS</title>
  <meta charset="utf-8">
 </head>
 <body>
  <div id="diagonal-div"></div>
 </body>
</html>

This is our base, we just need a div, which will be the one we will transform into diagonal

Now let’s go to CSS, which is the big part of the magic:

#diagonal-div {
 width: 100px;
 height: 100px;
 background: red;
 -webkit-transform: skew(20deg); /* Chrome, Opera */
 -ms-transform: skew(20deg); /* IE */
 transform: skew(20deg); /* Padrão */
}

Here we format the div with a height and width, and we create the angle with the transform property and its skew value, where a number followed by deg gives the angle

|  Do you want to specialize in Web Development? Take a look at  our course catalogue.

See what will be returned in the browser:

And of course we can invert this angle, just leave the deg negative, see how it works:

#diagonal-div-2 {
 width: 100px;
 height: 100px;
 background: blue;
 -webkit-transform: skew(-20deg); /* Chrome, Opera */
 -ms-transform: skew(-20deg); /* IE */
 transform: skew(-20deg); /* Padrão */
}

This is the return in the browser:

Now we’ve learned how to create a diagonal div with HTML and CSS! 

Another important information: I added a -webkit- and -ms- for browsers that have not yet adapted to this rule to be able to perform this action

Conclusion

In this article we learned how to create a diagonal div with CSS

Which is a pretty easy practice, we just need to create a div with dimensions (width and height)

Then add the transform property with the value of skew

And in skew we have to add the angle, which is an integer value followed by deg

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x