Search code examples
htmlcsslinear-gradients

How to create a horizontal rule with square zig zags?

can you help me with this hr-style like a zip, css only I don't even know how to start, in course it writes i need to use 2 gradients.

hr-zip

Solution

  • like below

    .box {
  height:15px;
  background:
    repeating-linear-gradient(90deg,blue  0 5px,#0000 0 10px) top,    /* top gradient*/
    repeating-linear-gradient(90deg,#0000 0 5px,blue  0 10px) bottom, /* bottom  gradient*/ 
    linear-gradient(blue 0 0) center; /* a line in the middle */
  background-size:100% calc(100%/3); /* the 3 with the same size */
  background-repeat:no-repeat;
}
    <div class="box"></div>

    Or

    .box {
  height:15px;
  background:
    repeating-linear-gradient(90deg,blue  0 5px,#0000 0 10px) top,   
    repeating-linear-gradient(90deg,#0000 0 5px,blue  0 10px) bottom;
  background-size:100% calc(2*100%/3); 
  background-repeat:no-repeat;
}
    <div class="box"></div>

    Another simplified version:

    .box {
  height:15px;
  background:
    linear-gradient(90deg,blue  50%,#0000 0) top,   
    linear-gradient(90deg,#0000 50%,blue  0) bottom;
  background-size:10px calc(2*100%/3);
  background-repeat:repeat-x;
}
    <div class="box"></div>