纯css实现优惠券效果

2024-05-18 19:53:18

最近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;

示例代码

Demo是从项目里直接编译出来的，有点乱，仅供参考：
https://jsrun.net/IT9Kp/edit

如果有更好的实现方案，欢迎留言发我~~~

往期文章

当我们谈Currying时，我们在谈些什么

现代包管理工具：pnpm

硬核！手撕源码第一弹: UpdateNotifier

前端转后端是一种怎样的体验

当程序员遇到会写代码的产品经理…

手摸手写个webpack plugin

手摸手写个webpack loader

这锅我背了…

ES2021新特性

用魔法打败魔法：前端代码规范化

手摸手教你搭个脚手架

手摸手教你搭建npm私有库

requestAnimationFrame

纯css实现优惠券效果相关推荐

如何用纯 CSS 实现优惠券效果
背景本文来自CODE.FUN ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家. 优惠券视觉效果上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有 ...
纯 CSS 实现优惠券透明圆形镂空打孔效果
本文同步发布在:纯 CSS 实现优惠券透明圆形镂空打孔效果我们在做商城类项目时,时常会有开发优惠券的需求,那么我们如何通过纯 CSS 来实现类似京东.淘宝的优惠券样式. 下面给大家分享一个纯 CSS ...
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
html实现开关,使用纯css实现开关效果
首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则关闭开关选中,则打开开关开始画出off.on状态的草图 ...
纯CSS实现弹幕效果
纯CSS实现弹幕效果动画相关的属性和方法已经本部分的开头简单提过了,我们来看一下本次要实现的效果--弹幕- 当你在阅读.看视频的时候经常会遇见一段文件或者一张表情从页面划过,要实现一个完整的功能很复 ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果发布时间:2021-03-19 09:49:16 来源:亿速云阅读:99 作者:小新小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
纯css实现信封效果
纯css实现信封效果 <body><div id="dialog"><div id="envelope"><div i ...

最新文章

热门文章