Having Striped Dashed lines as background

Question

Is it possible to have this striped and dashed background with CSS only?

Background is created by Chrome when inspecting flex elements, and I find it really cool.

I think I will try with two perpendicular repeating linear gradients, one for the repeating red lines, and another for making breaks in them, i.e. making them dashed. — Savo Pejović, Jun 18 '21 at 20:54

Shounak Das · Accepted Answer · 2021-06-19T04:10:52.313

You can use repeating-linear-gradient like this:

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100w;
  background: repeating-linear-gradient(
    45deg,
    tomato 0px,
    tomato 2px,
    transparent 2px,
    transparent 9px
  );
}
div {
  height: 100vh;
  width: 100vw;
  background: repeating-linear-gradient(
    -45deg,
    white 0px,
    white 4px,
    transparent 4px,
    transparent 12px
  );
}

<div></div>

Tweak with the code

These few lines do produce a somewhat similar pattern, but it won't look good on a low DPI screen. So, in my opinion, it's better to use an SVG pattern instead of pure CSS.

It really doesn't look as nice as in the picture, so I will try with the SVG. Thanks anyway. — Savo Pejović, Jun 19 '21 at 08:25

score 0 · Answer 2 · answered Jun 18 '21 at 18:23

0

You can use repeating-linear-gradient but i couldn't make it dashed:

//Example
body, html {
  background: repeating-linear-gradient(
      -55deg,
      #606dbc,
      #606dbc 5px,
      #465298 5px,
      #465298 10px
   );
}

answered Jun 18 '21 at 18:23

Arda Ravel

68
2
7

score 0 · Answer 3 · answered Jun 19 '21 at 09:13

Here's the SVG solution to my problem. CSS doesn't look to good.

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    
  <!-- Let's define the pattern -->
  <!-- The width and height should be double the size of a single checker -->
  <pattern id="pattern-checkers" x="0" y="0" width="100%" height="15" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
    <!-- Two instances of the same checker, only positioned apart on the `x` and `y` axis -->
    <!-- We will define the `fill` in the CSS for flexible use -->
  <line x1="0" y1="7" x2="100%" y2="7" stroke="#F3817F"
          stroke-dasharray="8 4" />
  </pattern>
  
  <!-- Define the shape that will contain our pattern as the fill -->
  <rect x="0%" y="0" width="100%" height="100%" fill="url(#pattern-checkers)"></rect>
  
</svg>

score 0 · Answer 4 · answered Jun 24 '21 at 18:04

0

I suggest to use patterns for creating wonderful backgrounds: http://projects.verou.me/css3patterns/

answered Jun 24 '21 at 18:04

Ivan Kharkivskyi

569
1
4
22

Having Striped Dashed lines as background

4 Answers4