How to draw diagonal lines with css [duplicate] - html

Question

This question already has answers here:
draw diagonal lines in div background with CSS
(13 answers)
Closed 8 years ago.
I need to draw in my div diagonal line. It should look like this:
My HTML:
<div style="height: 28px; width: 28px; border: 1px solid rgb(219,225,230);background-color:white;" >
</div>
Is it possible to do it only with CSS?

Answer 1

You can achieve the desired effect by using just one single div. Check the DEMO.
div{
border:1px solid gray;
width:28px;
height:28px;
position:relative;
}
div:after{
content:"";
position:absolute;
border-top:1px solid red;
width:40px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
Note: please add the vendor prefix for older browsers i.e. -moz, -webkit.

Answer 2

Using CSS transform property you can achieve this. Look at the following HTML and CSS.
HTML
<div style="border: 1px solid #000; width:100px; height:100px;">
<div id="hr" style="border-top:1px solid #ff00ff; height:100px; margin-left:-140px;"></div>
</div>
CSS
#hr {
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
DEMO

Answer 3

You could also use two elements and theirs borders like that :
The HTML :
<div class="top-left">
<div class="cross-a"></div>
<div class="cross-b"></div>
</div>
The CSS :
.top-left {
position: absolute;
top: 0;
left: 0;
height: 28px;
width: 28px;
border-top: solid 2px #fff;
border-left: solid 2px #fff;
}
.cross-a, .cross-b {
position:absolute;
width:0;
height:0;
}
.cross-a {
top: -2px;
left: -2px;
border-top: 28px solid transparent;
border-right: 28px solid #000;
}
.cross-b {
top: 0px;
left: 0px;
border-top: 26px solid transparent;
border-right: 26px solid #FFFFFF;
}
The fiddle : http://jsfiddle.net/9yK6q/7/

Answer 4

You could use a hr element or a other element and rotate it.
Here is a demo: http://jsfiddle.net/9HXTe/
div, hr {
-moz-transform: rotate(7.5deg);
-o-transform: rotate(7.5deg);
-webkit-transform: rotate(7.5deg);
-ms-transform: rotate(7.5deg);
transform: rotate(7.5deg);
}