Advertisement

Single 1 pixel diagonal line background



Single 1 pixel diagonal line background


Question

i try to add a diagonal line in the background of a div. i wonder if it's possible to do it without to use a .png image. I saw some css options but the render quality is poor and the line don't touch both side.

diagonal line

2015/08/06
1
3
8/6/2015 4:57:00 PM

Since you're talking about styling a DIV and tried a CSS solution (and there is actually a good and working one), this question would be better asked on StackOverflow. But since I know how to use CSS I'll answer here now anyway.

Create two DIVs. One for the red box, one for the white line like so

<div class="container">
  <div class="line"></div>
</div>

Then add the CSS

.container {
  width: 300px;
  height: 300px;
  background-color: red;
}

.line {
  position: relative;
  z-index: 1;
  left: -50%;
  width: 300%;
  height: 1px;
  background-color: white;
  -webkit-transform: rotate(-45deg); /* Safari and Chrome */
      -ms-transform: rotate(-45deg); /* IE 9 */
          transform: rotate(-45deg);
}

The result will look like this working demo.

enter image description here

2015/08/07
2
8/7/2015 12:15:00 AM