CSS/Less 绘制横向卡券、优惠券样式

一个项目需要用到优惠券,本打算切图,奈何优惠券内还有文字内容,不好适配,所以打算自己使用CSS画出这些仿淘宝、京东的优惠券样式。

radial-gradient()

使用radial-gradient径向渐变函数,可以实现一个圆形镂空的样子,在移动端,radial-gradient的兼容性也是相当完美。

CSS 语法
background: radial-gradient(shape size at position, start-color, …, last-color);

单个圆形镂空效果如下:

img

.base-one-circle {
  width: 100px;
  height: 100px;
  position: relative;
  background: radial-gradient(circle at 0px 50px, transparent 10px, #28A4F2 0) top
}

圆形的位置也可修改,只需要改“circle at…”后面这个两个数值即可,上,右,下的数值分别是:50px,0、100px,50px、50px,100px。

如果想要一个阴影状,带有立体感,可加上这个代码

filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3))

img

完整的卡券样式

利用background: radial-gradient的特性,我们可以组合成更复杂、完整的优惠券样式:

img

.base-coupons {
    width: 250px;
    height: 100px;
    position: relative;
    background: radial-gradient(circle at right top, transparent 10px,  #28A4F2 0) top left / 60px 51% no-repeat,
      radial-gradient(circle at right bottom, transparent 10px,  #28A4F2 0) bottom left /60px 51% no-repeat,
      radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top right /190px 51% no-repeat,
      radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /190px 51% no-repeat;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3));
  }

如果想要在卡券的拼接处加上虚线效果,我们可以利用伪类去实现:

.base-coupons::before {
    content: '';
    height: 80px;
    border: 1px dashed #fff;
    position: absolute;
    left: 60px;
    top: 0;
    bottom: 0;
    margin: auto;
  }

那么最终的优惠券样式效果:

img

linear-gradient()

CSS 语法
background: linear-gradient(direction, color-stop1, color-stop2, …);

linear-gradient 函数是一个线性渐变函数,我们可以使用这个线性渐变加伪类来实现一个优惠券的锯齿状效果,如下:

img

实例

设计图
卡券
笔者的设计图中还有一个颜色深点的边框,中间border为实线,为了实现border效果,在上下的圆形镂空处用了两个半圆来覆盖添加border。

less代码:

@cardW: calc(~"100vw - 48rpx"); // 卡片宽度
@cleftW: 180rpx; // 左边部分宽度
@topH: 180rpx; // 卡片高度
@circleW: 10rpx; // 圆角宽度

.half-circle {
  border: 2rpx solid #efd4d6;
  width: @circleW * 2;
  height: @circleW;
  line-height: @circleW;
  position: absolute;
  z-index: 10;
  left: calc(~"@{cleftW} - @{circleW}");
  box-sizing: border-box;
}

.top-circle {
  background-color: #fff;
  border-top-color: #fff;
  border-radius: 0 0px @circleW @circleW;
  top: 0;
}

.bottom-circle {
  background-color: #F6E1E5;
  border-bottom-color: #F6E1E5;
  border-radius: @circleW @circleW 0 0px;
  top: calc(~"@{topH} - @{circleW}");
}

.bottom-circle.white-border {
  background-color: #fff;
  border-bottom-color: #fff;
}

.card-content {
  box-sizing: border-box;
  width: calc(~"100vw - 48rpx");
  height: @topH;
  position: relative;
  border: 2rpx solid #efd4d6;
  background: radial-gradient(circle at right top, transparent @circleW, #F8E9EB 0) top left / @cleftW 51% no-repeat,
    radial-gradient(circle at right bottom, transparent @circleW, #F8E9EB 0) bottom left /@cleftW 51% no-repeat,
    radial-gradient(circle at left top, transparent @circleW, #F8E9EB 0) top right /calc(~"@{cardW} - @{cleftW}") 51% no-repeat,
    radial-gradient(circle at left bottom, transparent @circleW, #F8E9EB 0) bottom right /calc(~"@{cardW} - @{cleftW}") 51% no-repeat;

  .card__left {
    width: @cleftW;
    border-right: 1px solid #efd4d6;
    box-sizing: border-box;
    background-color: #F8E9EB;

  }

  .ucc-content__right {
    background-color: #F8E9EB;
  }
}

绘制竖向优惠券的方法,传送门:https://blog.csdn.net/a1056244734/article/details/113999606

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值