CSS实现无限正反Chevron线条：repeating-linear-gradient使用问题咨询

Hey there! I totally get the frustration when pseudo-elements or gradients don't behave like you expect. Let's break down how to build that infinite alternating chevron line, starting with fixing the repeating-linear-gradient approach (since that's where you got stuck), then covering a couple of alternative methods.

1. Understanding repeating-linear-gradient Position Parameters #

First, let's demystify those position values. The core syntax works like this:

repeating-linear-gradient(angle, color stop-start, color stop-end, ...);

The "stop" values define where a color begins and ends. For repeating gradients, the distance between the first and final stop in the sequence becomes the repeating unit. For chevrons, we'll use transparent and a solid color to carve out triangular shapes.

2. Working Gradient Implementation #

Here's a clean, reliable way to make an alternating chevron line using just background gradients:

.chevron-line {
  height: 20px; /* Adjust this to change chevron height */
  width: 100%;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px, /* Empty space before the chevron peak */
      #000 10px, /* Start of the chevron point */
      #000 15px, /* Peak of the chevron */
      transparent 15px, /* End of the chevron */
      transparent 20px /* End of one repeating tile */
    ),
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 10px,
      #000 10px,
      #000 15px,
      transparent 15px,
      transparent 20px
    );
  background-size: 20px 20px; /* Match the size of one repeating tile */
}

Quick breakdown: #

• We use two overlapping gradients at 45° (forward chevron) and 135° (reverse chevron) to create the alternating pattern.
• Each gradient’s 20px tile includes one chevron point (the 10px to 15px solid color range) surrounded by transparent space.
• background-size ensures the gradient tiles seamlessly across the entire element width.

3. Alternative Method: SVG Background #

If gradients feel too finicky, SVG is a scalable, easy-to-tweak option. You can embed the SVG directly in your CSS without external files:

.chevron-line-svg {
  height: 20px;
  width: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpolygon points='10,0 15,10 10,20' fill='%23000'/%3E%3Cpolygon points='30,0 25,10 30,20' fill='%23000'/%3E%3C/svg%3E") repeat-x;
  background-size: 40px 20px;
}

This SVG creates one forward and one reverse chevron in a 40px wide tile, then repeats horizontally. Adjust the points values to make chevrons wider, taller, or more rounded.

4. Alternative Method: CSS Mask + Skew #

Another clever approach uses CSS masking to carve chevron shapes out of a solid line:

.chevron-line-mask {
  height: 20px;
  width: 100%;
  background: #000;
  -webkit-mask: repeating-linear-gradient(
    90deg,
    transparent 0 10px,
    black 10px 15px,
    transparent 15px 20px
  );
  mask: repeating-linear-gradient(
    90deg,
    transparent 0 10px,
    black 10px 15px,
    transparent 15px 20px
  );
  transform: skewX(45deg);
}

The mask creates evenly spaced gaps in the solid line, then skewX twists those gaps into chevron shapes. Tweak the skewX angle or mask stop values to adjust the chevron’s sharpness or size.

Troubleshooting Your Pseudo-Element Attempt #

If you still want to make pseudo-elements work, the issue was likely incorrect gradient positioning or pseudo-element sizing. Here's a fixed version:

.chevron-line-pseudo {
  position: relative;
  height: 20px;
  width: 100%;
}
.chevron-line-pseudo::before,
.chevron-line-pseudo::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}
.chevron-line-pseudo::before {
  left: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, #000 10px, #000 15px, transparent 15px, transparent 20px);
}
.chevron-line-pseudo::after {
  right: 0;
  background: repeating-linear-gradient(135deg, transparent, transparent 10px, #000 10px, #000 15px, transparent 15px, transparent 20px);
  background-position: 10px 0; /* Shift to align perfectly with left chevrons */
}

This splits the alternating pattern between two pseudo-elements and aligns them correctly.

内容的提问来源于stack exchange，提问作者Alexis Vandepitte