如何构建适配全尺寸屏幕的响应式倾斜元素布局

你当前布局异常的核心原因是：skewY 倾斜变换的垂直偏移量会随容器宽度成正比增长，你目前使用的固定上下内边距（padding）仅能覆盖小、中尺寸屏幕的偏移需求，当屏幕宽度超过2K后，倾斜背景的上下突出高度会超过预留的固定padding，导致内部文字露出到背景外。

• 将倾斜容器的上下padding从固定像素改为固定像素+vw动态值的组合形式，vw是视口宽度百分比单位，会随屏幕宽度自动调整，刚好匹配倾斜偏移量的增长规律。3度倾斜对应的偏移系数约为0.052，预留6vw的动态padding即可覆盖绝大多数超宽屏场景。
• 给主容器设置最大宽度限制，避免超宽屏下单行文本过长影响阅读的同时，也能从根源限制倾斜偏移的最大值。

main {
  font-family: Arial;
  /* 新增：限制最大宽度，超宽屏居中显示 */
  max-width: 1920px;
  margin: 0 auto;
}

.content_nocolor {
  padding: 60px 40px 40px 40px;
  max-width: 1920px;
  margin: 0 auto;
}

.content__slant1 {
  position: relative;
  /* 修改：下padding改为动态值，适配不同宽度的倾斜偏移 */
  padding: calc(20px + 2vw) 40px calc(40px + 6vw) 40px;
  overflow: hidden;
  filter: drop-shadow(0px 40px 0px #f2f2f2);
}
.content__slant1:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #004B4F;
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  -o-transform: skewY(-3deg);
  transform: skewY(-3deg);
  transform-origin: top left;
}
.content__slant1 h1, .content__slant1 p {
  position: relative;
  color: #ffffff;
}
.content__slant1 h1 a, .content__slant1 p a {
  color: inherit;
}

.content__slant2 {
  position: relative;
  /* 修改：上padding改为动态值 */
  padding: calc(40px + 6vw) 40px calc(20px + 2vw) 40px;
  overflow: hidden;
  filter: drop-shadow(0px calc(-1*40px) 0px #f2f2f2);
}
.content__slant2:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F89300;
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  -o-transform: skewY(-3deg);
  transform: skewY(-3deg);
  transform-origin: bottom right;
}
.content__slant2 h1, .content__slant2 h3, .content__slant2 p {
  position: relative;
  color: #000000;
}
.content__slant2 h1 a, .content__slant2 h3 a, .content__slant2 p a {
  color: inherit;
}

.content__slant3 {
  position: relative;
  /* 修改：下padding改为动态值 */
  padding: 0 40px calc(40px + 6vw) 40px;
  overflow: hidden;
  filter: drop-shadow(0px 40px 0px #f2f2f2);
}
.content__slant3:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F89300;
  -webkit-transform: skewY(3deg);
  -moz-transform: skewY(3deg);
  -ms-transform: skewY(3deg);
  -o-transform: skewY(3deg);
  transform: skewY(3deg);
  transform-origin: bottom right;
}
.content__slant3 h1, .content__slant3 h3, .content__slant3 p {
  position: relative;
  color: #000000;
}
.content__slant3 h1 a, .content__slant3 h3 a, .content__slant3 p a {
  color: inherit;
}

HTML代码无需修改，替换原有CSS即可适配全尺寸屏幕。

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