如何用CSS倾斜div并确保其上下始终占屏幕宽度50%？

嘿，这个倾斜区块的效果我之前刚好做过，完全可以用CSS完美复刻，给你两个实用方案，按需选择就行：

方案一：Clip-path 直接裁剪（最推荐，响应式拉满） #

这个方法最直接，通过定义元素的裁剪路径，精准匹配你要的“顶部、底部各占屏幕50%”的效果，而且不管屏幕怎么缩放，比例都不会乱。

简单HTML结构 #

<div class="skewed-block">
  <!-- 这里塞你的内容就行 -->
  <h2>我是倾斜区块里的内容</h2>
</div>

核心CSS代码 #

.skewed-block {
  width: 100vw; /* 占满整个屏幕宽度 */
  height: 300px; /* 高度随便调，按你的设计来 */
  background: #2c3e50; /* 换成你需要的背景色 */
  /* 关键：用polygon定义四个顶点，实现倾斜效果 */
  clip-path: polygon(0 0, 50% 0, 100% 100%, 50% 100%);
  /* 顶点顺序：左上角 → 顶部中点 → 右下角 → 底部中点 */
  /* 加个flex方便居中内容，可选 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

这个clip-path的逻辑很简单：顶部只从屏幕左边缘延伸到中线（刚好50%宽度），底部从中线延伸到右边缘（也是50%宽度），四个点连起来就是你要的倾斜形状。

方案二：Transform Skew（适合需要边框/阴影的场景） #

如果你的区块需要加边框、阴影这类依赖完整盒模型的样式，clip-path可能会把这些效果截断，这时候用嵌套容器+倾斜变换就很合适：

HTML结构 #

<div class="skew-wrapper">
  <div class="skewed-content">
    <h2>带阴影的倾斜区块</h2>
  </div>
</div>

CSS代码 #

.skew-wrapper {
  width: 100vw;
  overflow: hidden; /* 把倾斜后超出的部分藏起来 */
}

.skewed-content {
  width: 150%; /* 加宽容器，避免倾斜后内容被切掉 */
  height: 300px;
  background: #2c3e50;
  transform: skewX(-20deg); /* 调整这个角度就能改变倾斜程度 */
  margin-left: -25%; /* 向左偏移25%，让顶部/底部中点对齐屏幕中线 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 阴影能正常显示啦 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* 重要：内部内容要反倾斜，不然文字会跟着歪 */
.skewed-content > * {
  transform: skewX(20deg); /* 角度和容器的skew相反就行 */
}

这个方法是先把内容容器加宽，倾斜后再偏移位置，让它的顶部和底部刚好各占屏幕50%，内部内容再反倾斜回来保证正常显示。

小提示 #

如果需要反向倾斜（比如顶部占右半部分，底部占左半部分），只需要把clip-path改成polygon(50% 0, 100% 0, 50% 100%, 0 100%)就行，非常灵活！

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