CSS三角形（或弧形方块）形状显示异常求助

你之前用透明边框没效果，核心问题是默认background-clip: border-box会让渐变背景延伸覆盖到边框区域，透明边框根本起不到裁切作用。推荐用clip-path来做，代码简洁还能完美适配响应式场景：

修改后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section class="hero">
  <div class="hero__gradient"></div>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Title</h1>
      </div>
    </div>
  </div>
</section>

.hero {
  background-color: #001d40;
  padding: 182px 0 100px 0;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.hero__gradient {
  width: 30vw;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(-45deg, #20c0f5, #a38cff, #00c4ff, #20c0f5);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  /* 核心：用多边形路径裁剪出左侧斜切的形状 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

关键说明 #

• clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%)：这个路径定义了元素的可见区域，四个点分别对应左上角、右上角、右下角、左侧25%位置的右下角，直接做出左侧斜切的效果。你可以调整最后一个点的百分比（比如改成30%）来控制斜切的角度。
• 删掉了没用的边框样式，直接通过裁剪实现形状，彻底避免背景覆盖边框的问题。
• 用vw和百分比单位，不同屏幕尺寸下能自动适配，解决你之前响应式差的问题。

如果想要你提到的“弧形方块”效果，只需给渐变元素加圆角即可：

.hero__gradient {
  /* 其他样式不变 */
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}

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