How to draw diagonal lines with css [duplicate]

Answer 1

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 2

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 3

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

Answer 4

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/