纯css实现优惠券效果-CFANZ编程社区

最近UI小姐姐休假了，优惠券缺了我几个切图，不好意思打扰人家，就寻思着，干脆用css直接手写吧。

这里记一下实现思路。

先来看看效果图：

看着还行叭。

主要是这几个地方的样式：

左上角书签；

优惠券票孔；

右上角状态标签。

1. 左上角书签

书签这里又分成两个部分，一部分是整体的半圆角矩形，一部分是左上的那个小折角。

半圆角矩形很好实现：

height: 20px;
border-radius: 0 20px 20px 0;

小折角是利用绝对定位和skew变换：

  display: block;
  width: 2px;
  height: 5px;
  background: #db0113;
  transform: skewY(-40deg);
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 0;

书签整体也是利用绝对定位，固定在左上角：

  position: absolute;
  top: 10px;
  left: -2px;
  width: 100%;
  max-width: 120px;

2. 优惠券票孔

优惠券以虚线为分界，分割成上下两部分。票孔也是利用绝对定位，可以固定在上半部分的底部，也可以固定在下半部分的顶部。颜色须与背景色相同。如写在上半部分中：

.dot-left,
.dot-right {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f5f5f5;
  position: absolute;
  z-index: 999;
}
.dot-left {
  bottom: -6px;
  left: -6px;
}
.dot-right {
  bottom: -6px;
  right: -6px;
}

3. 右上角状态标签

状态标签的倾斜用的是rotateZ，需要计算好大致的长宽和偏移：

  width: 80px;
  height: 20px;
  background: #dd0d1f;
  position: absolute;
  right: -20px;
  top: 10px;
  transform: rotateZ(45deg);
  text-align: center;
  color: #fff;
  font-size: 12px;