如何使用CSS实现卡片元素的上下镂空撕边效果

解决方案 #

核心问题是外层.card为完整的白色矩形背景，仅给撕裂线元素.rip设置上下margin只会让该元素本身位移，不会改变外层卡片的形状，自然看不到上下的镂空缺口。

你可以用径向渐变直接给卡片绘制上下半圆缺口，再调整撕裂线的伪类位置对齐即可，完整可运行代码如下：

.card {
  position: relative;
  display: flex;
  min-width: 0;
  height: 140px; /* 调整高度匹配内部图片高度 */
  word-wrap: break-word;
  /* 用径向渐变绘制上下两个半圆缺口，代替纯色背景 */
  background: radial-gradient(circle at 200px 0, transparent 20px, #fff 0) top,
              radial-gradient(circle at 200px 140px, transparent 20px, #fff 0) bottom;
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-clip: border-box;
  border-radius: .25rem;
  border: none;
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
  flex-direction: row;
}

.sold-tickets-image {
  max-width: 100px;
  height: 120px;
  cursor: pointer;
  margin: 10px 35px; /* 调整margin让图片垂直居中 */
}

.rip {
  width: 40px;
  height: 100px;
  margin: 20px 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAACCAYAAAB7Xa1eAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAaSURBVBhXY5g7f97/2XPn/AcCBmSMQ+I/AwB2eyNBlrqzUQAAAABJRU5ErkJggg==);
  background-size: 4px 2px;
  background-repeat: repeat-y;
  background-position: center;
  position: relative;
  box-shadow: 0 1px 0 0 #fff, 0 -1px 0 0 #fff;
}

.rip:before,
.rip:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 50%;
  transform: translate(-50%, -50%) rotate(135deg);
  border: 5px solid transparent;
  border-top-color: #fff;
  border-right-color: #fff;
  border-radius: 100%;
}

.rip:before {
  top: 0;
}

.rip:after {
  transform: translate(-50%, -50%) rotate(315deg);
  top: 100%;
}

<div class="card">
  <div class="sold-tickets-actions">
    <img class="sold-tickets-image" :src="image" alt="Sold Ticket" />
  </div>

  <div class="rip"></div>
  <div class="sold-tickets-actions">
    <img class="sold-tickets-image" :src="image" alt="Sold Ticket" />
  </div>
</div>

如果需要适配不同宽度的卡片，只需要调整径向渐变里的第一个定位参数（上述代码里的200px），对应撕裂线所在的水平位置即可。

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