# 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;
}```

## Author

• Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.