如何创建优惠券样式自定义形状背景 轻松实现兑换物品布局开发

下面提供2种简易可落地的实现方案，同时支持常规/深色模式适配：

方案1：纯CSS实现（最省事，无需额外资源） #

直接通过径向渐变挖出左右两侧的半圆缺口，配合样式调整即可实现目标效果，核心代码如下：

/* 优惠券卡片基础样式 */
.coupon-card {
  width: 300px;
  min-height: 150px;
  position: relative;
  /* 核心：左右两侧挖8px半径的半圆缺口 */
  background: 
    radial-gradient(circle at left 8px, transparent 8px, #ffffff 0) left,
    radial-gradient(circle at right 8px, transparent 8px, #ffffff 0) right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 可选：添加中间权益/按钮区的虚线分隔 */
.coupon-card::after {
  content: '';
  position: absolute;
  left: 65%;
  top: 0;
  height: 100%;
  width: 1px;
  background-image: linear-gradient(to bottom, #eeeeee 50%, transparent 50%);
  background-size: 100% 8px;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .coupon-card {
    background: 
      radial-gradient(circle at left 8px, transparent 8px, #2b2b2b 0) left,
      radial-gradient(circle at right 8px, transparent 8px, #2b2b2b 0) right;
    background-size: 51% 100%;
    background-repeat: no-repeat;
  }
  .coupon-card::after {
    background-image: linear-gradient(to bottom, #444444 50%, transparent 50%);
  }
}

方案2：SVG背景实现（适合更复杂的形状需求） #

如果需要自定义锯齿、花纹等特殊样式，用SVG矢量背景更灵活，不会拉伸失真，直接内嵌到页面或者CSS里就行，示例代码如下：

<!-- 直接放在HTML里作为背景层 -->
<svg width="100%" height="100%" viewBox="0 0 300 150" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 0H195C195 4.418 198.582 8 203 8C207.418 8 211 4.418 211 0H292C296.418 0 300 3.582 300 8V142C300 146.418 296.418 150 292 150H211C211 145.582 207.418 142 203 142C198.582 142 195 145.582 195 150H8C3.582 150 0 146.418 0 142V8C0 3.582 3.582 0 8 0Z" fill="#fff"/>
  <path d="M195 0V150" stroke="#eee" stroke-width="1" stroke-dasharray="4 4"/>
</svg>

需要改深色模式的话直接修改path的fill和stroke属性值即可。

适配注意事项 #

• 响应式适配可以把固定宽高换成百分比、max-width等弹性属性，缺口大小用rem单位可以适配不同尺寸的屏幕
• 如果需要做渐变色背景，直接把线性渐变和径向渐变叠加写在background属性里即可，无需调整结构

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