如何实现贯穿全屏的旋转分隔线？

你遇到的空隙问题，本质是原代码用固定像素值定位<hr>，无法适配不同屏幕宽度，且元素宽度不足以覆盖旋转后的首尾区域。以下是几种可靠的解决方案：

方案1：用背景渐变实现（最简洁） #

通过线性渐变直接画出三条彩色块，配合容器的超宽设置和旋转，确保全屏覆盖无空隙：

<div class="dividing-line"></div>

.dividing-line {
  /* 总高度：3条线各30px，可根据需求调整 */
  height: 90px;
  overflow: hidden;
  transform: rotate(-5deg);
  /* 用渐变画出三条彩色分隔线 */
  background: linear-gradient(
    to bottom,
    #e82010 0 30px,
    #fe5b20 30px 60px,
    #f26c8f 60px 90px
  );
  /* 超宽设置+左移，确保旋转后左右无空隙 */
  width: 200%;
  position: relative;
  left: -50%;
}

方案2：优化原有<hr>结构 #

保留你原本的多<hr>结构，通过百分比定位和宽度替换固定像素，解决适配问题：

<div class="dividingline">
  <hr>
  <hr>
  <hr>
</div>

.dividingline {
  transform: rotate(-5deg);
  overflow: hidden;
  /* 控制分隔线整体的上下间距 */
  margin: 50px 0;
}

.dividingline hr {
  margin: 0;
  /* 超宽+居中定位，覆盖旋转后的首尾区域 */
  width: 200%;
  position: relative;
  left: -50%;
  border-width: 10px;
  border-style: solid;
  border-radius: 24px;
  height: 30px;
}

/* 分别设置每条线的颜色 */
.dividingline hr:nth-child(1) {
  border-color: #e82010;
  background-color: #e82010;
}

.dividingline hr:nth-child(2) {
  border-color: #fe5b20;
  background-color: #fe5b20;
}

.dividingline hr:nth-child(3) {
  border-color: #f26c8f;
  background-color: #f26c8f;
}

核心原理 #

1. 用**200%宽度+left:-50%**让元素超出容器左右两侧，确保旋转后首尾不会露出空隙；
2. 父容器设置overflow:hidden，裁剪超出页面可视区域的部分；
3. 避免使用固定像素值定位，改用百分比实现自适应屏幕宽度。

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