How to draw diagonal lines with css [duplicate]

Question

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