How to Draw a Diagonal Line Using CSS3

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.

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;

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>

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 a diagonal line between two points with CSS and JS

If you have to do this via CSS and Javascript, it is possible but not ideal. You'll have to do some extra work to calculate the angle between the points and the distance between your points. Take a look at the sample below:

const point1 = document.getElementsByClassName('point')[0]
const point2 = document.getElementsByClassName('point')[1]
const line = document.getElementsByClassName('line')[0]

// Find the points based off the elements left and top
var p1 = {x: point1.offsetLeft, y: point1.offsetTop};
var p2 = {x: point2.offsetLeft, y: point2.offsetTop};

// Get distance between the points for length of line
var a = p1.x - p2.x;
var b = p1.y - p2.y;
var length = Math.sqrt( a*a + b*b );

// Get angle between points
var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;

// Get distance from edge of point to center
var pointWidth = point1.clientWidth / 2;
var pointHeight = point1.clientWidth / 2;

// Set line distance and position
// Add width/height from above so the line starts in the middle instead of the top-left corner
line.style.width = length + 'px';
line.style.left = (p1.x + pointWidth)+ 'px';
line.style.top = (p1.y + pointHeight) + 'px';

// Rotate line to match angle between points
line.style.transform = "rotate(" + angleDeg + "deg)";

.wrapper {
  width: 320px;
  height: 180px;
  position: relative;
  border: 1px solid #aaa;
  background-color: #eee;
}
.point {
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: #555;
}
.line {
  position: absolute;
  height:2px;
  background-color: #d63030;
  transform-origin: left;
}

<div class='wrapper'>
  <div class='point' style='left: 40px; top: 40px;'></div>
  <div class='point' style='left: 260px; top: 120px;'></div>
  <div class='line'</div>
</div>

Slanted diagonal line in html or css?

Based on CSS3 linear-gradients solution except that the angle is not hard coded:

table:nth-of-type(1) td {

  background-image: linear-gradient(

    to top right,

    white 48%,

    black,

    white 52%

  );

}

table:nth-of-type(2) td {

  background-image: linear-gradient(

    to top right,

    papayawhip calc(50% - 1px),

    black,

    papayawhip calc(50% + 1px)

  );

}

/* for testing */

table {

  border-collapse: collapse;

  margin-top: 1em;

  margin-bottom: 1em;

}

td:nth-child(odd) {

  width: 10em;

}

td:nth-child(even) {

  width: 20em;

}

<table border="1">

  <tbody>

    <tr>

      <td>Narrow</td>

      <td>Wide</td>

    </tr>

    <tr>

      <td>Narrow</td>

      <td>Wide</td>

    </tr>

  </tbody>

</table>

<table border="1">

  <tbody>

    <tr>

      <td>Narrow</td>

      <td>Wide</td>

    </tr>

    <tr>

      <td>Narrow</td>

      <td>Wide</td>

    </tr>

  </tbody>

</table>

---

Related Topics