Draw Diagonal Lines in Div Background With Css

draw diagonal lines in div background with CSS

You can do it something like this:

<style>
    .background {
        background-color: #BCBCBC;
        width: 100px;
        height: 50px;
        padding: 0; 
        margin: 0
    }
    .line1 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid red;
        -webkit-transform:
            translateY(-20px)
            translateX(5px)
            rotate(27deg); 
        position: absolute;
        /* top: -20px; */
    }
    .line2 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid green;
        -webkit-transform:
            translateY(20px)
            translateX(5px)
            rotate(-26deg);
        position: absolute;
        top: -33px;
        left: -13px;
    }
</style>
<div class="background">
    <div class="line1"></div>
    <div class="line2"></div>
</div>

Here is a jsfiddle.

Improved version of answer for your purpose.

How to draw diagonal lines with css

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.

CSS diagonal lines - how to fit into its parent element?

You can draw the lines with pseudo elements.

.diagonal-container {  border: 1px solid #000;  width: 400px;  height: 400px;  margin: 0 auto;  position: relative;  overflow: hidden;}
.diagonal-container:before {  border-top: 1px solid #ff00ff;  content: '';  position: absolute;  top: 0; left: 0; right: -50%;  transform: rotate(45deg);  transform-origin: 0 0;}
.to-right:before {  right: 0; left: -50%;  transform: rotate(-45deg);  transform-origin: 100% 0;}

<div class="diagonal-container to-right"></div>
<div class="diagonal-container to-left"></div>
<div class="diagonal-container to-right"></div>

Is it possible to draw a diagonal line using CSS3?

yes it is, there is more then one possibility:

You could use a hr element or a other element and rotate it. Here is a demo:

And yes it works in IE to :)

http://jsfiddle.net/LqFAX/

   -moz-transform: rotate(7.5deg);  
     -o-transform: rotate(7.5deg);  
-webkit-transform: rotate(7.5deg);  
    -ms-transform: rotate(7.5deg);  
        transform: rotate(7.5deg);  
           filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',  
                  M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,sizingMethod='auto expand')";

             zoom: 1;

creating a responsive diagonal line in element

You can do this in multiple ways.

1) background image

1.1) SVG

You can create an svg direct as inline code and use it for drawing the line. Using this you can achiev nice effects like shadow, gradient, dotted line, ... and much more. It is also posible to use a svg inside the css background-image element.

jsfiddle

<svg style='width: 100%; height: 100%;'>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:rgb(0,0,0);stroke-width:1"/>
</svg>

1.2) fix image (png, jpg, ...)

You can also use a simple image as background image on full div.

jsfiddle

2) create linear background gradient

jsfiddle

.testDiv {
  width: 300px;
  height: 300px;
  background:linear-gradient(to bottom right, transparent calc(50% - 1px),  black calc(50% - 1px), black 50%, transparent 50%);
}

How does this works?

you define a gradient from top left to bottom right
the color is transparent until 50% - 1 px and again transparent from 50% to end

(read more here)

3) rotated inner div (only on square divs)

jsfiddle

when resizing the testDiv, the line should stay a diagonal.

.testDiv{
  width: 600px;
  height: 600px;
  background-color: gray;
}

.lineDiv {
  position: relative;
  top: 29%;
  left: 29%;
  width: 142%;
  height: 142%;
  border-left: solid thin blue;
  transform: rotate(45deg);
}

How does this works?

the outer div has a size (may be dynamic too)
the inner div has position relative and width and height are set to 142%
top and left are set to 29% (28.7)

-> 142 = sqrt(100^2 + 100^2) (see phytagoras)

How to draw many diagonal lines[right hash lines] using css, html?

.bar {
    width: 200px;
    height: 25px;
    background: #6FD967;
    border-right: 150px solid green;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        transparent 1px,
        green 7px
      ),
      linear-gradient(
        to bottom,
        transparent,
        transparent
      )
  }

Working Fiddle: https://jsfiddle.net/mamata/q3ef8b7d/

Draw Diagonal Lines in Div Background With Css