如何在div左侧创建45度角的缺口形状

你之前用skewX()的方法只能实现斜切单边，无法形成半方形内凹缺口。这里提供两种实用方案：

方案1：使用CSS clip-path（推荐，代码简洁） #

clip-path可直接定义元素裁剪形状，适配这类自定义缺口场景：

.square-container {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #ccc;
  margin-left: 50px;
  /* 裁剪路径：按坐标点定义内凹形状 */
  clip-path: polygon(50px 0, 100% 0, 100% 100%, 50px 100%, 0 50%);
}

.content {
  padding: 20px;
  /* 避免内容被裁剪，调整左侧内边距 */
  padding-left: 70px;
}

<div class="square-container">
  <div class="content">
    Test
  </div>
</div>

原理说明 #

clip-path: polygon(50px 0, 100% 0, 100% 100%, 50px 100%, 0 50%)的坐标点对应：

• 50px 0：顶部左侧向右偏移50px的位置
• 100% 0：右上角
• 100% 100%：右下角
• 50px 100%：底部左侧向右偏移50px的位置
• 0 50%：左侧中间位置（缺口的45度顶点）
  路径自动闭合后，即可形成左侧的半方形内凹。

方案2：伪元素组合（兼容旧浏览器） #

若需兼容不支持clip-path的旧浏览器，可通过两个伪元素拼接缺口：

.square-container {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #ccc;
  margin-left: 50px;
  overflow: visible; /* 取消溢出隐藏，让伪元素正常显示 */
}

/* 顶部三角形覆盖块 */
.square-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #fff;
  transform: rotate(45deg) translate(-35px, -35px);
}

/* 底部三角形覆盖块 */
.square-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #fff;
  transform: rotate(-45deg) translate(-35px, 35px);
}

.content {
  padding: 20px;
  padding-left: 70px;
}

原理说明 #

用两个50x50的正方形伪元素，分别旋转45度后定位到容器左上角和左下角，用与页面背景一致的颜色覆盖多余区域，从而形成45度半方形缺口。

原代码问题分析 #

你之前的skewX(-45deg)仅对伪元素做水平斜切，只能生成一条斜边，但半方形缺口需要顶部、底部的两段垂直边加中间斜边，单伪元素斜切无法实现这种复合形状。

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