如何用CSS创建倾斜线条？需增大间距且仅用CSS与transform

尝试使用CSS绘制4条平行倾斜线条，目前使用CSS的skew属性调整线条角度，但效果不符合预期（线条不平行且间距过小），需要增大线条之间的间距。请问是否仅通过CSS和transform就能解决该问题？

原代码如下：

原CSS代码 #

.line {
  width: 100%;
  height: 3px;
  background-color: #1e1e1e;
  position: absolute;
  left: 0;
}

.line.line-1 {
  top: 100px;
  transform: skewY(20deg);
}

.line.line-2 {
  top: 150px;
  transform: skewY(28deg);
}

.line.line-3 {
  top: 200px;
  transform: skewY(35deg);
}

.line.line-4 {
  top: 250px;
  transform: skewY(41deg);
}

原HTML代码 #

<div class="wrapper">
  <div class="line line-1"></div>
  <div class="line line-2"></div>
  <div class="line line-3"></div>
  <div class="line line-4"></div>
</div>

目标背景效果：

完全可以仅通过CSS和transform解决问题，核心问题在于你当前的线条不平行（每个线条使用了不同的skewY角度），同时倾斜后的垂直间距视觉上被压缩。以下是调整后的实现方案：

关键调整点 #

• 所有线条使用相同的skewY角度，确保平行。
• 加宽线条并偏移位置，避免倾斜后容器两端出现空白。
• 增大垂直方向的间距（top值或translateY偏移量），抵消倾斜带来的视觉压缩效果。

调整后的代码 #

CSS代码 #

.wrapper {
  position: relative;
  height: 500px; /* 给容器设置高度，方便展示效果 */
  overflow: hidden; /* 隐藏倾斜后超出容器的线条部分 */
}

.line {
  width: 150%; /* 加宽线条，覆盖倾斜后的容器范围 */
  height: 3px;
  background-color: #1e1e1e;
  position: absolute;
  left: -25%; /* 向左偏移，配合宽度调整确保无空白 */
  transform: skewY(20deg); /* 统一倾斜角度，保证线条平行 */
}

.line.line-1 {
  top: 80px;
}

.line.line-2 {
  top: 160px; /* 增大垂直间距，满足视觉需求 */
}

.line.line-3 {
  top: 240px;
}

.line.line-4 {
  top: 320px;
}

HTML代码（无需修改） #

<div class="wrapper">
  <div class="line line-1"></div>
  <div class="line line-2"></div>
  <div class="line line-3"></div>
  <div class="line line-4"></div>
</div>

可选优化：使用CSS变量控制间距 #

如果需要更灵活地调整间距，可以用CSS变量结合transform的translateY：

.wrapper {
  position: relative;
  height: 500px;
  overflow: hidden;
}

.line {
  width: 150%;
  height: 3px;
  background-color: #1e1e1e;
  position: absolute;
  left: -25%;
  transform: translateY(var(--y-offset)) skewY(20deg); /* 先平移再倾斜，顺序不能乱 */
}

.line.line-1 {
  --y-offset: 80px;
}

.line.line-2 {
  --y-offset: 160px;
}

.line.line-3 {
  --y-offset: 240px;
}

.line.line-4 {
  --y-offset: 320px;
}

注意：transform的顺序很重要，translateY要放在skewY之前，否则倾斜后的平移方向会跟着角度变化，导致间距不符合预期。

内容的提问来源于stack exchange，提问作者Ramazan Erikli