: Single 1 pixel diagonal line background 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

@Welton168

I don't have the rep to comment on 'DA01's answer, but the 'fuzzy' edge can be eliminated by setting the size of the background to match the size of the div and setting those coordinates to be in px as opposed to %:

background-image: linear-gradient(135deg, #f00 0, #f00 281px, #ddd 282px, #f00 283px, #f00 566px);
background-size: 400px, 400px;


The downside to this approach is that you need to have the dimensions of the div and background fixed or change it through javascript on-the-fly.

Vote Up Vote Down

@Holmes874

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.

JSBin Example

Vote Up Vote Down

@Deb5748823

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.

Vote Up Vote Down