css不规则卡片制作优惠券

现在越来越多的商家开始在网站上提供优惠券，不少网站也开始采用不规则卡片的设计来展示优惠券。这种设计可以让优惠券看起来更加有趣，吸引用户的注意力。下面我们就来学习一下使用CSS制作不规则卡片的方法。

/* HTML代码 */
<div class="coupon">
  <div class="content">
    <h2>优惠券标题</h2>
    <p>这里是优惠券的详细信息。</p>
  </div>
  <div class="bg"></div>
</div>

/* CSS代码 */
.coupon {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  z-index: 2;
}

.bg {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  transform: rotate(45deg);
  background-color: #f44336;
  z-index: 1;
} 

首先我们需要新建一个div，并添加两个子元素，一个是用来展示优惠券内容的div，一个是用来展示卡片背景的div。使用position: relative让父元素的定位参照物是自身，在子元素中使用position: absolute让子元素脱离文档流，并使用transform: translate(-50%, -50%)让子元素在父元素中居中。bg元素使用transform: rotate(45deg)将元素旋转45度，使其呈现菱形的形状，并将其放在左上角，这样整个卡片就呈现了不规则的形状。

最后，我们可以在代码中添加一些过渡效果或者动画效果，使得卡片更具有视觉冲击力。比如可以在:hover时触发动画效果，使内容div和背景div分别产生旋转和移动的动画。

通过这种制作方法，我们可以轻松制作出各种形状的不规则卡片。这种设计风格不仅在优惠券中可以使用，还可以应用在各种场景中，如商品展示、网站导航等等。