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.

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: