如何为单侧带背景图的垂直横幅添加三角形分隔边框？

嘿，我明白你想要的效果：一个垂直横幅分成两个区域，中间用三角形分隔，而且三角形部分要保留背景图。你当前的代码问题在于渐变没有被限制在分隔位置，导致形状延伸到了容器末尾，咱们来调整一下方案：

核心改进思路 #

• 把背景图作为容器的底层背景，确保整个区域（包括三角形分隔）都能显示背景图
• 用伪元素单独创建三角形分隔，精准控制它的位置和大小，避免影响整个容器的背景
• 把两个内容区域分开，确保内容不会被三角形遮挡

完整可运行代码 #

<div class="vertical-banner">
  <div class="banner-section banner-section--top">
    some text here<br>
    more text
  </div>
  <div class="banner-section banner-section--bottom">
    Second section content<br>
    More content goes here
  </div>
</div>

.vertical-banner {
  width: 250px; /* 横幅的固定宽度 */
  height: 500px; /* 横幅总高度，可根据需求调整 */
  position: relative;
  /* 底层背景图，覆盖整个横幅 */
  background-image: url(https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=2700&q=80);
  background-size: cover;
  background-position: center;
}

/* 创建三角形分隔线 */
.vertical-banner::before {
  content: "";
  position: absolute;
  top: 50%; /* 把三角形放在垂直中间位置 */
  left: 0;
  right: 0;
  height: 40px; /* 三角形的高度，控制分隔的粗细 */
  /* 用渐变生成直角三角形：左半透明，右半白色 */
  background: linear-gradient(135deg, transparent 50%, #ffffff 50%);
  /* 让三角形垂直居中对齐 */
  transform: translateY(-50%);
}

/* 内容区域样式，确保在三角形上方显示 */
.banner-section {
  position: relative;
  z-index: 1;
  padding: 2rem;
  color: #ffffff; /* 文字白色，适配背景图 */
}

/* 底部区域固定在横幅底部 */
.banner-section--bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

效果说明 #

1. 背景图作为容器的底层，所以三角形分隔的透明部分会直接显示背景图，完美满足你的需求
2. 伪元素创建的三角形只在垂直中间位置，不会延伸到容器两端
3. 两个内容区域分别在上下，通过z-index确保文字不会被三角形遮挡

你可以调整.vertical-banner的height、三角形的height以及top值，来改变分隔的位置和大小，完全适配你的设计需求～

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