How to draw diagonal lines using css

Question

I need to draw a div in my 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>    

Can this be done only with CSS?

Answer 1

you can achieve the effect of desire using only one div. Check out 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. add vendor prefix for older browsers i.e. -moz, -webkit.

Answer 2

Using the CSS property transform, you can achieve this. Take a 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

:

HTML:

<div class="top-left">
    <div class="cross-a"></div>
    <div class="cross-b"></div>
</div>

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

: http://jsfiddle.net/9yK6q/7/

Answer 4

You can use the hr element or another 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);  
}