调整响应式CSS3三角形高度：实现扁平化斜三角形

我来帮你搞定这个需求！原来的代码是靠创建正方形容器再旋转伪元素来生成90度直角三角，但现在要固定高度30px同时保持响应式，我们可以换一种更直接、更易维护的方式——用CSS线性渐变，完美适配你的需求。

修改后的完整代码 #

p { margin: 0; }
body { background: black; }
.container { width: 50%; margin: 0 auto; }
.item { background: white; }
/* 核心修改的.tr样式 */
.tr {
  width: 100%;
  height: 30px;
  /* 线性渐变绘制斜三角：从右上角指向左下角，50%位置切换颜色形成斜边 */
  background: linear-gradient(to left bottom, white 50%, transparent 50%);
}

<div class="container">
  <div class="item">
    <h1>Some Content</h1>
    <p>Dummy Content</p>
  </div>
  <div class="tr"></div>
</div>

关键改动说明 #

1. 固定高度：把原来的padding-bottom: 100%（用来生成正方形容器）换成了height: 30px，直接锁定三角的高度。
2. 线性渐变画三角：linear-gradient(to left bottom, white 50%, transparent 50%)的作用是：
   • 渐变方向从右上角指向左下角
   • 在容器的对角线位置（50%比例处）切换颜色，白色区域自动形成斜三角，透明区域隐藏多余部分
3. 保留响应式：.tr的宽度保持100%，会随父容器.container的宽度自动调整，完全保留响应式特性。

如果你坚持想用伪元素+transform的方式，也可以试试这个方案（不过渐变方式更推荐）：

.tr {
  overflow: hidden;
  width: 100%;
  height: 30px;
  position: relative;
}
.tr:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% + 30px);
  height: 30px;
  background: white;
  transform-origin: top right;
  /* 可根据需求调整旋转角度，这里示例用20度 */
  transform: rotate(-20deg);
}

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