How to draw diagonal lines with css

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?

div{position: relative; } div:after{ content:""; position:absolute; top:0; right:0; width:150%; height:1px; background-color: red; transform: rotate(-35deg); transform-origin: top right; } — atazmin, Feb 12 '18 at 02:14

score 31 · Accepted Answer · edited May 18 '18 at 22:18

31

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.

edited May 18 '18 at 22:18

Alex. P.

133
9

answered Jul 18 '14 at 07:26

Kheema Pandey

9,977
4
25
26

2

this will only work when the box is a square. – Yuriy Kravets Apr 18 '21 at 12:33

score 4 · Answer 2 · answered Jul 18 '14 at 07:25

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

score 2 · Answer 3 · answered Jul 18 '14 at 07:27

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/

score 0 · Answer 4 · answered Jul 18 '14 at 07:23

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

How to draw diagonal lines with css

4 Answers4

Linked