如何用 CSS 实现层叠优惠券效果？

css 实现层叠优惠券效果

在 css 中实现层叠优惠券效果并不困难。之前，@xboxyan 在《css 实现优惠券的技巧》一文中分享了相关的实现方法。

效果预览

[图片：优惠券效果预览]

实现步骤

html 结构

<div class="coupon">
  <p>10% off</p>
  <p>coupon code: abc123</p>
</div>

css 样式

.coupon {
  position: relative;
  padding: 10px;
  background-color: #f39c12;
  color: #fff;
}

.coupon::before,
.coupon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, #f39c12 25%, #fff 75%);
}

.coupon::before {
  transform: skewY(-20deg);
}

.coupon::after {
  left: 50%;
  transform: skewY(20deg);
}

// 优惠券文本样式
.coupon p {
  margin: 0;
  text-align: center;
}

通过使用相对定位在优惠券元素上叠加伪元素，并结合线性渐变背景和斜切变换，即可实现优惠券的层叠效果。

以上就是如何用 CSS 实现层叠优惠券效果？的详细内容，更多请关注其它相关文章！