CSS实现递增间距重复黑色背景条的技术求助

Hey there! I get what you're trying to do—those incrementing gaps between black bars are tricky with repeating-linear-gradient because it's built for repeating identical patterns, not growing intervals. Let's break down how to fix this.

Why repeating-linear-gradient Won't Work #

Your current code uses a fixed cycle: 1405px of white, then 10px of black, repeated endlessly. This pattern can't adapt to incrementing gaps (1405px → 1415px → 1425px...) because the cycle length never changes. We need a dynamic approach instead.

Solution 1: Pseudo-Elements + CSS Variables + JavaScript #

This is my go-to approach—it keeps your markup clean by using pseudo-elements for the black bars, and uses JavaScript to calculate the incrementing gaps.

Step 1: Base CSS #

First, set up styles for your container, elements, and the black bar pseudo-element:

.container {
  position: relative;
  /* Add padding at the bottom to make space for the last black bar */
  padding-bottom: 200px;
}

.item {
  position: relative;
  /* Adjust height/margin to match your actual elements */
  height: 60px;
  margin-bottom: 15px;
  background: #f0f0f0;
}

/* This pseudo-element will be our black bar */
.item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px; /* Match your original black bar height */
  background: black;
  /* Position the bar after the incrementing gap */
  bottom: calc(-1 * var(--gap) - 10px);
}

Step 2: JavaScript to Set Incrementing Gaps #

We'll loop through each element, calculate its unique gap, and set a CSS variable for it:

const items = document.querySelectorAll(".item");
const initialGap = 1405; // First gap value
const gapIncrement = 10; // Amount to add each time

items.forEach((item, index) => {
  // Calculate gap for this element: initial + (index * increment)
  const currentGap = initialGap + (index * gapIncrement);
  // Set the CSS variable on the item
  item.style.setProperty("--gap", `${currentGap}px`);
});

This works for any number of elements—just add more .item elements to your HTML, and the JS will automatically calculate the correct gap for each one.

Solution 2: Dynamically Create Black Bar Elements #

If you prefer using actual DOM elements instead of pseudo-elements, this approach generates separate black bars and positions them correctly.

Step 1: Base CSS #

.container {
  position: relative;
  padding-bottom: 200px;
}

.item {
  height: 60px;
  margin-bottom: 15px;
  background: #f0f0f0;
}

.black-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background: black;
}

Step 2: JavaScript to Generate and Position Bars #

const container = document.querySelector(".container");
const items = document.querySelectorAll(".item");
let currentPosition = 0;
const initialGap = 1405;
const gapIncrement = 10;

items.forEach((item, index) => {
  // Update position to the bottom of the current item
  currentPosition += item.offsetHeight + parseInt(getComputedStyle(item).marginBottom);
  
  // Calculate the position for this black bar
  const barTop = currentPosition + (initialGap + index * gapIncrement);
  
  // Create the black bar element
  const bar = document.createElement("div");
  bar.classList.add("black-bar");
  bar.style.top = `${barTop}px`;
  
  // Add the bar to the container
  container.appendChild(bar);
  
  // Update position to the bottom of the black bar for the next cycle
  currentPosition = barTop + 10;
});

Final Notes #

Both approaches will give you the incrementing gaps you need. Solution 1 is cleaner for markup, while Solution 2 gives you more control over individual bar elements if you need it later.

内容的提问来源于stack exchange，提问作者Rick van Lieshout