CSS实现带边框圆角的非标准形状区块：求更优方案

我需要创建带圆角的红色边框容器（左下角有一个带圆角的向内直角缺口），目前通过额外子区块加四个伪元素实现了效果，但希望有更优雅的方案。核心限制是区块内部需要放置文本和视觉内容，所以不能只用SVG绘制形状，想知道是否可以用clip-path或类似方法实现？

现有实现代码 #

CSS #

.wrapper {
  width: 320px;
  height: 370px;
  border: 2px solid red;
  border-radius: 10px;
  position: relative;
}
.wrapper:before,
.wrapper:after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background-color: #fff;
  position: absolute;
  z-index: 2;
}
.wrapper:before {
  left: -5px;
  top: 160px;
}
.wrapper:after {
  left: 95px;
  bottom: -5px;
}
.border-block {
  background-color: #fff;
  position: absolute;
  width: 100px;
  height: 200px;
  border-top: 2px solid red;
  border-right: 2px solid red;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  border-top-right-radius: 10px;
  left: -2px;
  bottom: -2px;
}
.border-block:before,
.border-block:after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-left: 2px solid red;
  border-bottom: 2px solid red;
  border-bottom-left-radius: 10px;
  position: absolute;
  z-index: 3;
}
.border-block:before {
  top: -17px;
  left: -2px;
}
.border-block:after {
  bottom: -2px;
  left: 100px;
}

HTML #

<div class="wrapper">
  <div class="border-block"></div>
</div>

优化方案1：使用clip-path实现 #

clip-path可以直接裁剪容器形状，完全不影响内部内容的布局，是适配需求的优雅方案。我们通过定义多边形路径实现缺口，再用伪元素补充缺口处的圆角边框：

CSS代码 #

.wrapper {
  width: 320px;
  height: 370px;
  border: 2px solid red;
  border-radius: 10px;
  /* 裁剪路径：按顺时针定义容器顶点，对应左下角缺口 */
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% 100%, 
    115px 100%, 
    115px calc(100% - 15px), 
    15px calc(100% - 15px), 
    15px 175px, 
    0 175px
  );
  position: relative;
  background: #fff; /* 设为白色避免透出父元素背景 */
}

/* 补充缺口处的圆角边框 */
.wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15px;
  width: 100px;
  height: 15px;
  border-bottom-left-radius: 10px;
  background: #fff;
  border-left: 2px solid red;
  border-bottom: 2px solid red;
}

HTML代码 #

<div class="wrapper">
  <!-- 内部可直接放置文本、图片等内容 -->
  <p>示例文本内容</p>
  <img src="your-image.png" alt="示例图片">
</div>

说明：clip-path的路径数值可根据容器尺寸调整，适配不同大小的缺口。

优化方案2：简化伪元素实现（无额外子区块） #

如果不想使用clip-path，可以简化现有方案，仅通过容器的两个伪元素实现效果，去掉多余的子区块：

CSS代码 #

.wrapper {
  width: 320px;
  height: 370px;
  border: 2px solid red;
  border-radius: 10px;
  position: relative;
  background: #fff;
  overflow: hidden; /* 避免伪元素超出容器范围 */
}

.wrapper::before,
.wrapper::after {
  content: '';
  position: absolute;
  background: #fff;
}

/* 遮罩左侧部分边框，形成垂直缺口边缘 */
.wrapper::before {
  left: 0;
  top: 175px;
  bottom: 0;
  width: 15px;
  border-right: 2px solid red;
}

/* 实现底部缺口的圆角边框 */
.wrapper::after {
  left: 15px;
  bottom: 0;
  width: 100px;
  height: 15px;
  border-bottom-left-radius: 10px;
  border-left: 2px solid red;
  border-bottom: 2px solid red;
}

HTML代码 #

<div class="wrapper">
  <!-- 内部内容正常放置 -->
</div>

说明：通过两个伪元素分别处理垂直和水平方向的缺口，结构更简洁，维护成本更低。

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