如何使用CSS结合border-radius实现半切三角形并完成左侧白色容器+背景图片布局？

嘿，我来帮你搞定这个布局需求！首先先修正你HTML里的一个小语法问题：style属性里嵌套双引号会导致解析错误，把url("../image.jpg")改成url('../image.jpg')就好啦。

接下来，我们可以用border-radius的复合属性技巧来实现你要的“半切三角形”视觉效果——其实是给白色容器切出一个三角形缺口，露出后方的背景图。核心思路是给白色容器设置精准的border-radius值，再配合绝对定位把它固定在父容器的左侧角落。

完整代码示例 #

<!-- 把内联样式移到CSS里更易维护，结构也更清晰 -->
<div class="image-wrapper">
  <div class="white-corner-box"></div>
</div>

.image-wrapper {
  /* 父容器设置背景图，你可以根据需求调整宽高 */
  width: 450px;
  height: 350px;
  background: url('../image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative; /* 让子容器能基于它做绝对定位 */
  overflow: hidden; /* 可选：防止切角超出父容器范围 */
}

.white-corner-box {
  /* 把白色容器固定在左上角 */
  position: absolute;
  top: 0;
  left: 0;
  /* 设置容器的尺寸，这里以250px×250px为例，你可以按需调整 */
  width: 250px;
  height: 250px;
  background-color: white;
  /* 关键：用border-radius实现右下角的三角形切角 */
  /* 语法：border-radius: 左上 右上 右下 左下 / 左上 右上 右下 左下 */
  /* 这里给右下角的水平和垂直圆角都设为100%，就能切出完美的直角三角形缺口 */
  border-radius: 0 0 100% 0;
}

效果拆解 #

• image-wrapper设置position: relative是为了让白色子容器的绝对定位基于它，不会跑到页面其他地方。
• .white-corner-box的border-radius: 0 0 100% 0是核心：它指定右下角的圆角半径为100%，相当于从容器的右下角顶点向左上方向切出一个三角形缺口，刚好露出后方的背景图，完全符合你要的“半切三角形”视觉效果。
• 如果想要切其他角落的缺口，只需要调整border-radius的顺序：比如切左上角就用border-radius: 100% 0 0 0，切右上角用border-radius: 0 100% 0 0。

自定义调整建议 #

• 想要圆润一点的切角？把100%改成具体的像素值就行，比如border-radius: 0 0 100px 0，这样缺口会是圆弧过渡的。
• 如果白色容器要占满父容器的左侧半区，可以把宽度设为50%、高度设为100%，然后用border-radius: 0 100% 100% 0，这样就会形成左侧白色、右侧是对称圆弧切角的效果。

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