如何无需重复标签实现CSS几何形状批量生成？

你可以用以下几种方案替代重复标签的写法，既精简DOM结构又能实现同样的效果：

方案1：CSS渐变 + 单个容器元素 #

利用repeating-linear-gradient结合倾斜变换，只需要一个容器就能生成连续的斜矩形线条：

.linha-grafica-titulo {
  height: 20px; /* 线条的垂直高度 */
  transform: skew(-45deg); /* 调整倾斜角度，和渐变方向匹配 */
  background: repeating-linear-gradient(
    0deg,
    #ff0000,
    #ff0000 20px, /* 单个红色矩形的高度（倾斜前） */
    transparent 20px,
    transparent 40px /* 每个重复单元的总高度 */
  );
}

使用时只需要在标题下方加一个<div class="linha-grafica-titulo"></div>即可，无需重复标签。

方案2：利用标题的伪元素（无需额外容器） #

如果不想新增任何DOM元素，可以直接给标题添加伪元素来生成线条：

.titulo-principal::after {
  content: "";
  display: block;
  margin-top: 10px; /* 调整和标题的间距 */
  height: 20px;
  transform: skew(-45deg);
  background: repeating-linear-gradient(45deg, #ff0000 0 20px, transparent 20px 40px);
}

这种写法连线条容器都不需要，直接复用标题元素的伪元素，DOM结构最精简。

方案3：自定义背景尺寸实现渐变重复 #

如果需要更精确控制单个斜矩形的宽度，可以用linear-gradient配合background-size：

.linha-grafica-titulo {
  height: 20px;
  transform: skew(-45deg);
  background: linear-gradient(45deg, #ff0000 50%, transparent 50%);
  background-size: 40px 100%; /* 单个斜矩形的水平宽度 */
}

通过设置背景尺寸让渐变图案自动重复，同样能生成连续的斜线条。

这些方案的核心优势是减少冗余DOM节点，样式维护更高效，同时渲染性能也比重复标签的写法更好。

内容的提问来源于stack exchange，提问作者Mateus Brandeburski Ramos