How to draw a diagonal line using CSS?

From a CSS point of view, a diagonal line is nothing but a horizontal line which is rotated at +45 or -45 degrees angle.

So, to draw a diagonal line in CSS, we have to simply rotate a normal horizontal line at an angle of + or – 45 degrees. The rotation in CSS is done using the transform property.

To create a horizontal line you can either use the border-top or the border-bottom property whichever best suits you.

Here is a simple example of a diagonal line:

Example:

div{
   border-bottom: 1px solid red;
   width: 50%;
   transform: rotate(45deg);
   transform-origin: top left;
}

You can use the above approach to draw a diagonal within a box as well. But now you have to deal a little with the position property as well to set the position of the diagonal line.

We know that the length of the diagonal line is √2 * length of the edge. We will use this concept to draw the diagonal line and will use the calc() function to calculate its length in px.

Here is a working example:

Example:

div.box{
   width: 200px;
   height: 200px;
   border: 1px solid red;
   position: relative;
   box-sizing: border-box;
   overflow: hidden;
}
div.line{
   width: calc(1.414 * 200px);
   transform: rotate(45deg);
   transform-origin: top left;
   border-top: 1px solid blue;
   position: absolute;
   top: -2px;
   left: -1px;
   box-sizing: border-box;
}

Here is the same example but with the second diagonal line of the box. In this example, we have changed the transform-origin to bottom left instead of top left and now we are rotating the horizontal line at -45 degrees instead of +45 degrees.

Example:

div.box{
   width: 200px;
   height: 200px;
   border: 1px solid red;
   position: relative;
   box-sizing: border-box;
   overflow: hidden;
}
div.line{
   width: calc(1.414 * 200px);
   transform: rotate(-45deg);
   transform-origin: bottom left;
   border-top: 1px solid blue;
   position: absolute;
   bottom: -2px;
   left: -1px;
   box-sizing: border-box;
}

In the following example, we have drawn both the diagonal lines within the box. It is just a combination of the above two scenarios.

Example:

div.box{
   width: 200px;
   height: 200px;
   border: 1px solid red;
   position: relative;
   box-sizing: border-box;
   overflow: hidden;
}
div.line1{
   width: calc(1.414 * 200px);
   transform: rotate(45deg);
   transform-origin: top left;
   border-top: 1px solid blue;
   position: absolute;
   top: -2px;
   left: -1px;
   box-sizing: border-box;
}
div.line2{
   width: calc(1.414 * 200px);
   transform: rotate(-45deg);
   transform-origin: bottom left;
   border-top: 1px solid blue;
   position: absolute;
   bottom: -2px;
   left: -1px;
   box-sizing: border-box;
}