券形CouponCanvas

LIVE CSS PLAYGROUND

调一张自己的券。

编辑文字，拖动券面元素，并导出当前设计。方向键微调位置，按住 Shift 可大步移动。

样式模板 / 演示数据
COUPONCANVAS / DEMO
餐饮灵感 · 对边圆缺口
晨光咖啡时刻
满 58 元可用
20元抵扣
演示有效期：2026.08.31
仅作样式演示

EXPORT DESIGN

复制或导出当前设计

<!-- CSS -->
<style>
/* 对边圆缺口 */
.coupon {
  background: #f6c999;
  color: #20334d;
  border-radius: 24px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle at left calc(50% + 0px), transparent 18px, #000 19px), radial-gradient(circle at right calc(50% + 0px), transparent 18px, #000 19px);
  mask-image: radial-gradient(circle at left calc(50% + 0px), transparent 18px, #000 19px), radial-gradient(circle at right calc(50% + 0px), transparent 18px, #000 19px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.coupon { width: min(100%, 530px); height: 326px; font-family: Arial, "PingFang SC", sans-serif; }
.coupon__item { position: absolute; z-index: 2; left: var(--x); top: var(--y); box-sizing: border-box; overflow-wrap: anywhere; }
.coupon__item--topline,.coupon__item--category { width: min(64%, calc(100% - var(--x))); font-size: 10px; font-weight: 800; line-height: 1.15; letter-spacing: .08em; }
.coupon__item--title { width: min(62%, calc(100% - var(--x))); font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.06em; }
.coupon__item--condition { width: min(58%, calc(100% - var(--x))); font-size: 13px; line-height: 1.3; }
.coupon__item--price { width: 28%; color: #bd4428; font-size: 60px; font-weight: 800; line-height: .8; letter-spacing: -.08em; text-align: right; overflow-wrap: anywhere; }
.coupon__item--price small { display: block; color: inherit; font-size: 12px; line-height: 1.15; letter-spacing: 0; }
.coupon__item--expiry,.coupon__item--footer { width: min(46%, calc(100% - var(--x))); font-size: 11px; font-weight: 700; line-height: 1.15; }
@media (max-width: 640px) { .coupon { height: 290px; } .coupon__item--title { font-size: 24px; } .coupon__item--price { font-size: 45px; } }
</style>

<!-- HTML -->
<div class="coupon">
  <div class="coupon__item coupon__item--topline" style="--x:5.3%;--y:8.6%">COUPONCANVAS / DEMO</div>
  <div class="coupon__item coupon__item--category" style="--x:5.3%;--y:22.5%">餐饮灵感 · 对边圆缺口</div>
  <div class="coupon__item coupon__item--title" style="--x:5.3%;--y:30.5%">晨光咖啡时刻</div>
  <div class="coupon__item coupon__item--condition" style="--x:5.3%;--y:46.5%">满 58 元可用</div>
  <div class="coupon__item coupon__item--price" style="--x:67%;--y:36%">20<small>元抵扣</small></div>
  <div class="coupon__item coupon__item--expiry" style="--x:5.3%;--y:84.5%">演示有效期：2026.08.31</div>
  <div class="coupon__item coupon__item--footer" style="--x:72%;--y:84.5%">仅作样式演示</div>
</div>