如何在div边框创建缺口？含草莓图片场景的边框裁剪方案

嘿，这两个需求在前端开发里挺常见的，我给你整理了几种靠谱的实现方法，尤其是针对你提到的「绝对定位透明草莓PNG」的场景，直接就能套用！

一、通用div边框缺口实现方法 #

这里有三种最常用的方案，你可以根据缺口的形状和复杂度选择：

1. 伪元素覆盖法（最灵活，首推） #

原理很简单：用和div背景色一致的伪元素，盖在边框的指定位置，模拟出“缺口”的效果。不管是方形、圆形还是不规则缺口，都能轻松实现。

比如要在底部中间做一个方形缺口：

.border-box {
  position: relative;
  width: 300px;
  height: 200px;
  border: 2px solid #333;
  background: #ffffff; /* 记住这个颜色，伪元素要和它一致 */
}

.border-box::after {
  content: "";
  position: absolute;
  bottom: -2px; /* 和边框厚度一致，刚好覆盖底部边框 */
  left: 50%;
  transform: translateX(-50%);
  width: 60px; /* 缺口宽度 */
  height: 2px; /* 和边框厚度一致 */
  background: #ffffff; /* 和div背景同色，完全覆盖边框 */
}

如果要做圆形缺口，把伪元素改成圆形就行：

.border-box::after {
  content: "";
  position: absolute;
  bottom: -6px; /* 圆形半径+边框厚度，让圆心对齐边框 */
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
}

2. CSS clip-path 裁剪法 #

用clip-path直接定义元素的可见区域，相当于把边框和元素一起剪出缺口。不过要注意：这个方法会同时裁剪div的背景，所以如果div有背景色，最好用两层div（外层做边框裁剪，内层放内容）。

示例：底部中间带斜角的缺口

.border-box {
  width: 300px;
  height: 200px;
  border: 2px solid #333;
  /* 多边形路径：按顺序定义点的坐标，最后一个点会自动连回第一个点 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(50% + 30px) calc(100% - 10px), 50% 100%, calc(50% - 30px) calc(100% - 10px), 0 calc(100% - 10px));
}

调整calc()里的数值，就能改变缺口的大小和形状。

3. 拆分边框元素法 #

把边框拆成上、右、下左段、下右段、左这五个独立元素，然后在需要缺口的地方留空。适合非常复杂的缺口场景，但代码量会多一点。

示例：底部中间缺口

<div class="border-box">
  <div class="border top"></div>
  <div class="border right"></div>
  <div class="border bottom-left"></div>
  <div class="border bottom-right"></div>
  <div class="border left"></div>
  <!-- 你的内容放在这里 -->
</div>

.border-box {
  position: relative;
  width: 300px;
  height: 200px;
}

.border {
  position: absolute;
  background-color: #333;
}

.top { top: 0; left: 0; right: 0; height: 2px; }
.right { top: 0; right: 0; bottom: 0; width: 2px; }
.bottom-left { bottom: 0; left: 0; width: calc(50% - 30px); height: 2px; }
.bottom-right { bottom: 0; right: 0; width: calc(50% - 30px); height: 2px; }
.left { top: 0; left: 0; bottom: 0; width: 2px; }

二、草莓图片场景的专属解决方案 #

你提到草莓是绝对定位的透明PNG，div带标准边框，要剪出匹配的缺口。这里强烈推荐用「伪元素覆盖法」，因为它能精准贴合图片的形状，而且完全不影响图片的显示。

假设你的HTML结构是这样的：

<div class="strawberry-container">
  <img src="strawberry.png" alt="草莓" class="strawberry-img">
  <!-- 其他内容 -->
</div>

实现步骤&代码 #

1. 先确定图片的位置：比如图片向上偏移了15px，距离右侧20px，宽度80px。
2. 用伪元素覆盖div边框与图片重叠的部分，颜色和div背景一致，让边框看起来像是被“剪”掉了。

.strawberry-container {
  position: relative;
  width: 400px;
  height: 300px;
  border: 2px solid #e74c3c; /* 红色边框，搭配草莓很合适 */
  background: #fef9f8; /* 淡粉色背景，伪元素要和它一致 */
  padding: 20px;
}

.strawberry-img {
  position: absolute;
  top: -15px; /* 图片向上偏移，部分超出容器 */
  right: 20px;
  width: 80px;
  height: auto;
}

/* 关键：用伪元素覆盖边框，模拟缺口 */
.strawberry-container::after {
  content: "";
  position: absolute;
  top: -2px; /* 和边框厚度一致，对齐顶部边框 */
  right: calc(20px - 2px); /* 图片right值 - 边框厚度，精准对齐图片左侧 */
  width: 80px; /* 和图片宽度一致 */
  height: 15px; /* 图片超出容器的高度，也就是需要覆盖的边框长度 */
  background: #fef9f8; /* 和容器背景同色，完全覆盖边框 */
  /* 如果草莓底部是弧形，加个border-radius贴合形状 */
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

为什么这个方案最适合？ #

• 精准匹配：通过调整伪元素的位置和大小，完全贴合图片超出div的区域，边框看起来刚好在草莓周围“断开”。
• 灵活调整：如果草莓的形状不规则，只要把伪元素的clip-path或者border-radius改成和图片底部匹配的形状就行。
• 不影响内容：伪元素只覆盖边框，不会遮挡图片或者div里的其他内容。

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