Slanted Diagonal Line in HTML or CSS

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>

CSS for slant diagonal line

That's the CSS and HTML code for the slanted black line:

.borderdraw {

  border-style:solid;

  height:0;

  line-height:0;

  width:0;

}

<div style="position: relative; width: 100px; height: 100px;">

<div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px;" class="borderdraw"><!-- --></div>

<div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px;" class="borderdraw"><!-- --></div>

    </div>

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 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.

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/

Diagonal line through div or span

Is first fiddle as example with image in background instead not good enough?

http://jsfiddle.net/zw3Ve/410/

.line {
    display:inline-block;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    background:url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
    background-size:100% 100%;
}

Creating diagonal lines using html and css

i think this problem will slove with this css, put this css with your css

.desc::before {
    content: "";
    height: 50px;
    width: 100%;
    display: block;
    border-left: 0px solid blue;
    border-right: 263px solid #F4F4F4;
    border-bottom: 0px solid #000;
    border-top: 50px solid transparent;
    margin-top: -65px;
    position: absolute;
    z-index: 1;
    left: -15px;
}

Drawing diagonal lines in html5

You can use an SVG:

<svg style='width: 200px; height: 200px;'>
    <line x1="0" y1="200" x2="200" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

With percentage coordinates, if needs be:

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

http://jsfiddle.net/qXKfN/2/

^{(Should work in FF, Chrome, Safari, and IE >= 9)}

---

At various sizes in various browsers, the SVG might be pushed out of its container. One solution is to set line-height: 0px;. Another solution, and probably the preferred solution, is to set position: relative; on the container and position: absolute; on the SVG.

http://jsfiddle.net/qXKfN/3/

---

Related Topics