Diagonal Stripes That Are 1Px Wide

Diagonal stripes that are 1px wide

A little more elabourate explanation of the conundrum here: according to the Pythagoras principle (and its triples), it is impossible to have a square (which is simply two right triangles fit together) whose sides are integers that has a diagonal whose length is an integer number, too.

This is because 1² + 1² = sqrt(2)². Since the square root of 2 is an irrational number, all derivatives of this (a square of whatever side length that is an integer number) will have a diagonal of irrational length.

This is the closest I can get — specify an integer square, but the stripes will be of non-integer width: http://jsfiddle.net/teddyrised/SR4gL/2/

#thing {
    height: 200px;
    background-image: linear-gradient(-45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
    background-size: 4px 4px;
}

The side lengths of the imaginary square, tiled over your element, will be 4px wide. This means the diagonal length would be sqrt(32), and the stripe will be 1.414...px when measured diagonally across (close to 1, but not quite there), or 2px wide when measured parallel to the x or y axis.

1px wide diagonal stripes with gap between in CSS

Something like this using repeating-linear-gradient

#stripes {  height: 100vh;  background: repeating-linear-gradient( -45deg, transparent, transparent 5px, /* gap */  black 6px, /* overall width incluing gap */  black 6px);}
* {  margin: 0;  padding: 0;}

<div id="stripes"></div>

CSS background stripes with 1px white, the rest transparent

To get exact pixel dimensions, you can use pixels instead of percentages:

body {    background: #222;}
.stripes {    background: repeating-linear-gradient(      -75deg,      #fff, /* White, starting at pixel 0 */      #fff 1px,  /* White, continuing to pixel 1 */      transparent 1px, /* Transparent beginning at pixel 1 */      transparent 10px /* Transparent ending at pixel 11 (10 + 1) */    );    width: 180px;    height: 56px;    z-index: 99;    position: absolute;    left: 0;    top: 0;}
.stripes2px {    background: repeating-linear-gradient(      -75deg,      #fff, /* White, starting at pixel 0 */      #fff 2px,  /* White, continuing to pixel 2 */      transparent 2px, /* Transparent beginning at pixel 2 */      transparent 12px /* Transparent ending at pixel 14 (12 + 2) */    );    top: 56px;}
.stripes-fade {    background: repeating-linear-gradient(      -75deg,      #fff, /* White, starting at pixel 0 */      #fff 1px,  /* White, continuing to pixel 1 */      transparent 2px, /* Transparent beginning at pixel 2 */      transparent 10px /* Transparent ending at pixel 12 (10 + 2) */    );    top: 112px;}

<div class="stripes"></div><div class="stripes stripes2px"></div><div class="stripes stripes-fade"></div>

1px wide element looks thicker than a border of 1px width

It only looks thicker due to the pixelation from being diagonal. In the snippet, hover the first box you will see the lines rotate and appear as thick as the border.

In the second box I have come up with a bit of a workaround. The width of the diagonal lines is halved (0.5) of the default. And then using box shadow, I add back a quarter (0.25) to each side of the box using spread, and then a little anti-alias hack by using blur. This is fix:

height: calc(var(--borderThickness) * .5 );
box-shadow: 0 0 .075px calc(var(--borderThickness) * .25 ) currentColor;

On 100% zoom, this will make the line appear a little thinner. On higher zooms it will basically match the width because the '0.075px' box-shadow blur becomes negligible

:root { --borderThickness: 1px }

.boxes { display: flex; gap: 1rem; justify-content: center }

.box {
  border: var(--borderThickness) solid currentColor;
  display: grid;
  height: 100px; width: 100px;
  overflow: hidden;
  place-items: center;
  position: relative;
}

.box::before, .box::after {
  background-color: currentColor;
  content: '';
  grid-area: 1/1/-1/-1;
  height: var(--borderThickness); width: 141.4%;
  transform: rotate(var(--rotate));
  transition: transform 120ms ease-in-out;
}

.box::before { --rotate: 45deg } .box:hover::before { --rotate: 90deg }
.box::after { --rotate: -45deg } .box:hover::after { --rotate: 0deg }

.box.fix::before, .box.fix::after {
  height: calc(var(--borderThickness) * .5 );
  box-shadow: 0 0 .075px calc(var(--borderThickness) * .25 ) currentColor; /* Thicken line and anti alias */
}

<div class="boxes">
  <div class="box"></div>
  <div class="box fix"></div>
</div>

CSS3 1px diagonal lines gradient

just use background-size with your exisiting code try to add this background-size: 8px 8px;

draw diagonal lines in div background with CSS

You can do it something like this:

<style>
    .background {
        background-color: #BCBCBC;
        width: 100px;
        height: 50px;
        padding: 0; 
        margin: 0
    }
    .line1 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid red;
        -webkit-transform:
            translateY(-20px)
            translateX(5px)
            rotate(27deg); 
        position: absolute;
        /* top: -20px; */
    }
    .line2 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid green;
        -webkit-transform:
            translateY(20px)
            translateX(5px)
            rotate(-26deg);
        position: absolute;
        top: -33px;
        left: -13px;
    }
</style>
<div class="background">
    <div class="line1"></div>
    <div class="line2"></div>
</div>

Here is a jsfiddle.

Improved version of answer for your purpose.

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>

Crosshatch effect with repeating-linear-gradient results in uneven pattern

I can't seem to find a perfect solution. This JSFiddle from this Stack Overflow Question - "Diagonal stripes in CSS that are 1px wide" seems to be in agreement with the complications mentioned near the bottom of this CSS-Tricks tutorial

.crosshatch {
   width: 500px;
   height: 200px;
   color: white;
   background-image: linear-gradient(
      45deg, 
      rgba(0,0,0,0.5) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(0,0,0,0.5) 50%, 
      rgba(0,0,0,0.5) 75%, 
      transparent 75%, 
      transparent
      );
   background-size: 5px 5px;
}

---

Related Topics