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.
2015/08/06
Popular Answer
If you can live without it being exactly 1px, you can use pure CSS on a single div by using a background gradient:
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.
2015/08/07