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

If you can live without it being exactly 1px, you can use pure CSS on a single div by using a background gradient:

enter image description here

div {
   width: 400px;
   height: 400px;
   background: linear-gradient(135deg, #ff3232 0%,#ff3030 49.6%,#d6d6d6 50%,#ff3030 50.4%,#ff0000 100%);
}

The catch is that you set gradients by % so you likely will never get exactly a 1px line in the center. But it's lean markup.

JSBin Example

2015/08/07
2
8/7/2015 1:28:00 AM