如何通过CSS实现如图所示的带缺口左下边框样式？

嘿，想要实现左下边框带缺口的样式？我给你分享几个实用的CSS方案，你可以根据自己的场景来选：

这个思路最直观——给容器加正常边框，再用伪元素在左下角盖一个和背景色一致的小方块，模拟出缺口效果，适合纯色背景的容器。

.box {
  position: relative;
  width: 300px;
  height: 200px;
  border: 2px solid #333;
  background-color: #fff; /* 必须和伪元素背景色一致，不然会透底 */
}

.box::before {
  content: '';
  position: absolute;
  bottom: -2px; /* 和边框宽度对齐，刚好盖住边框底部 */
  left: -2px; /* 对齐边框左侧 */
  width: 40px; /* 缺口的宽度 */
  height: 40px; /* 缺口的高度 */
  background-color: #fff;
  /* 想要圆角缺口？加这句就行 */
  /* border-radius: 0 0 4px 0; */
}

如果你的容器背景不是纯色（比如有背景图），伪元素的方法就不好使了。这时候可以用线性渐变分别绘制四条边，直接把左下角的部分留空：

.box {
  width: 300px;
  height: 200px;
  /* 四个渐变分别对应上、右、下、左边框，精准控制显示范围 */
  background: 
    linear-gradient(to right, #333, #333) top / 100% 2px no-repeat,
    linear-gradient(to bottom, #333, #333) right / 2px 100% no-repeat,
    /* 下边框：从缺口右侧（距离左40px）到最右端 */
    linear-gradient(to right, #333, #333) bottom / calc(100% - 40px) 2px no-repeat,
    /* 左边框：从顶部到缺口顶部（距离底40px） */
    linear-gradient(to bottom, #333, #333) left / 2px calc(100% - 40px) no-repeat;
  /* 要加背景图直接写在这，不会被边框覆盖 */
  /* background-image: url('your-bg-image.jpg'); */
  /* background-size: cover; */
}

如果需要更独特的缺口形状（比如斜角、弧形），可以用clip-path来裁剪容器。不过注意，这个属性在IE浏览器里不支持，适合现代浏览器场景：

.box {
  width: 300px;
  height: 200px;
  border: 2px solid #333;
  background-color: #fff;
  /* 多边形裁剪路径：按顺序定义顶点坐标，左下角刻意留空 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px));
}

你可以调整40px和calc(100% - 40px)里的数值，来改变缺口的大小和形状，甚至可以改成曲线坐标实现弧形缺口。

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