从零开始学优惠券样式代码编写，让你的网站焕然一新！

样式1：

8429a202311250926512312.png

代码实例：


<div class="box">
      <div class="itemBox">
        <div class="leftBox">全额抵扣</div>
        <div class="rightBotton">
          <button>立即使用</button>
        </div>
      </div>
    </div>
 .box {
  background-color: red;
  .itemBox {
    display: flex;
    justify-content: flex-start;
    position: relative;
    border-radius: 10px;
    background-color: #fff;
    &::before {
      content: '';
      position: absolute;
      top: 45%;
      background-color: #f5f5f5;
      width: 12px;
      height: 12px;
      border-radius: 6px;
      left: -5px;
    }
    &::after {
      content: '';
      position: absolute;
      top: 45%;
      background-color: #f5f5f5;
      width: 12px;
      height: 12px;
      border-radius: 6px;
      right: -5px;
    }
    .leftBox {
      border-radius: 10px 0 0 10px;
      background-color: #8b91ff;
      width: 95px;
      height: 90px;
      line-height: 90px;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      text-align: center;
    }
    .rightBotton {
      margin-left: 18px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      button {
        background-color: #f0f1ff;
        color: #8b91ff;
        height: 28px;
        width: 86px;
        border: none;
        border-radius: 14px;
        font-size: 14px;
      }
    }
  }
}

样式2：

6b329202311250926567074.png

代码实例：

<div class="coupon">
      <div class="coupon-info coupon-hole">
        <div>111</div>
        <div>111</div>
      </div>
      <div class="coupon-get">立即领取</div>
    </div>

.coupon {
  display: inline-flex;
  color: white;
  position: relative;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin: 1rem;
  /** 这里不能用百分号，因为百分号是分别相对宽和高计算的，会导致弧度不同  */
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  overflow: hidden;
  background-color: #f39b00;
}
/* 左边框的波浪 */
.coupon::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 14px;
  background-image: radial-gradient(white 0, white 4px, transparent 4px);
  /** 如果只设置为半径的两倍(直径)，那么半圆之间没有类似堤岸的间隔 */
  background-size: 14px 14px;
  background-position: 0 2px;
  background-repeat: repeat-y;
  z-index: 1;
}
.coupon::before {
  left: -7px;
}
 
.coupon-info {
  padding: 1rem;
  position: relative;
  min-width: 15rem;
  border-right: 2px dashed white;
}
.coupon-info::before {
  top: -0.5rem;
}
.coupon-info::after {
  bottom: -0.5rem;
}
 
/* 使用两个边框为圆角的白色div制造半圆缺角，有个缺点是这个缺角必须与背景色相同（clip-path不好弄） */
.coupon-hole::before,
.coupon-hole::after {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  right: -0.5rem;
}
.coupon-get {
  /** 这里使用flex是为了让文字居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-width: 5rem;
  position: relative;
  padding-left: 0.6rem;
}

样式3：

d4d25202311250927013688.png

代码实例：

<div class="coupon">
      <div class="coupon-info">
        <div>111</div>
        <div>111</div>
        <div>111</div>
      </div>
      <div class="coupon-get">
        <div class="coupon-desc">立即领取</div>
      </div>
    </div>

.coupon {
  display: inline-flex;
  color: white;
  position: relative;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin: 1rem;
  /** 这里不能用百分号，因为百分号是分别相对宽和高计算的，会导致弧度不同  */
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  overflow: hidden;
  background-image: linear-gradient(150deg, #f39b00 50%, #f39b00d8 50%);
  // background-image: linear-gradient(150deg, #d24161 50%, #d24161d8 50%);
  // background-image: linear-gradient(150deg, #7eab1e 50%, #7eab1ed8 50%);
  // background-image: linear-gradient(150deg, #50add3 50%, #50add3d8 50%);
}
.coupon::before {
  left: -7px;
}
.coupon::after {
  right: -7px;
}
/* 左边框的波浪 */
.coupon::before,
.coupon::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 14px;
  background-image: radial-gradient(white 0, white 4px, transparent 4px);
  /** 如果只设置为半径的两倍(直径)，那么半圆之间没有类似堤岸的间隔 */
  background-size: 14px 14px;
  background-position: 0 2px;
  background-repeat: repeat-y;
  z-index: 1;
}
 
.coupon-info {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  position: relative;
  min-width: 15rem;
  border-right: 2px dashed white;
}
.coupon-info::before {
  top: -0.5rem;
}
.coupon-info::after {
  bottom: -0.5rem;
}
 
.coupon-get {
  padding: 1rem;
  /** 这里使用flex是为了让文字居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-width: 5rem;
  position: relative;
  .coupon-desc {
    font-size: 18px;
    font-weight: bold;
  }
}

样式4：

34103202311250927064531.png

代码实例：

<div class="quan">
    <div class="quanInfo">
      <div>111</div>
      <div>111</div>
    </div>
    <div class="receiveBtn">
      <div class="receive">使用</div>
    </div>
  </div>

.quan {
  margin: 22px 37px;
  background-color: #17dbcb;
  border-radius: 10px;
  display: flex;
  width: 400px;
  height: 100px;
}
 
.quanInfo {
  background-image: radial-gradient(
      circle at right top,
      #ffffff,
      #ffffff 15px,
      transparent 16px
    ),
    radial-gradient(
      circle at right bottom,
      #ffffff,
      #ffffff 15px,
      transparent 16px
    );
  border-right: 1px dashed #f64f51;
  padding: 30px 50px;
  width: 70%;
}
.receiveBtn {
  background-image: radial-gradient(
      circle at left top,
      #ffffff,
      #ffffff 15px,
      transparent 16px
    ),
    radial-gradient(
      circle at left bottom,
      #ffffff,
      #ffffff 15px,
      transparent 16px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -2px;
  background-color: pink;
}
.receive {
  border-radius: 23px;
  background-color: #5fc484;
  padding: 7px 31px;
  text-align: center;
  width: 30px;
  margin: 0 20px;
  font-size: 12px;
  color: #ffffff;
}

样式5：

48c7a202311250927306453.png

代码实例：

<div class="coupon">
   <div class="aa">111</div>
</div>

.coupon {
  position: relative;
  width: 290px;
  height: 100px;
  background: radial-gradient(circle at right top, transparent 15px, red 0) top
      left/90px 50% no-repeat,
    radial-gradient(circle at right bottom, transparent 15px, red 0) bottom
      left/90px 50% no-repeat,
    radial-gradient(circle at left top, transparent 15px, pink 0) top
      right/200px 50% no-repeat,
    radial-gradient(circle at left bottom, transparent 15px, pink 0) bottom
      right/200px 50% no-repeat;
  .aa {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
    color: pink;
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/193422.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

FLV 文件格式分析

FLV 文件格式分析

前言 flv 是 flash video 的缩写&#xff0c;是 Adobe Flash payler 支持的一种流媒体播放格式。flv 是一种层级格式&#xff0c;除了一个 flv header 外&#xff0c;剩下全是由 一个个 tag 组成。tag 是由 tag 头和 tag 数据组成。tag 类型分为音频、视频、脚本&#xff0c;一…
阅读更多...
Kafka 如何保证消息消费的全局顺序性

Kafka 如何保证消息消费的全局顺序性

哈喽大家好&#xff0c;我是咸鱼 今天我们继续来讲一讲 Kafka 当有消息被生产出来的时候&#xff0c;如果没有指定分区或者指定 key &#xff0c;那么消费会按照【轮询】的方式均匀地分配到所有可用分区中&#xff0c;但不一定按照分区顺序来分配 我们知道&#xff0c;在 Kaf…
阅读更多...
redis笔记 -- 基础数据结构

redis笔记 -- 基础数据结构

redis笔记 基础的数据结构&#xff1a;string、list、hash、set、zset 容器型数据结构&#xff08;list、hash、set、zset&#xff09;通用规则 如果容器不存在&#xff0c;就创建一个&#xff0c;再进行操作如果容器里没有数据了&#xff0c;就立即删除&#xff0c;回收内存…
阅读更多...
数字IC芯片验证流程及验证工具推荐？收藏专用

数字IC芯片验证流程及验证工具推荐？收藏专用

验证其实是一个“证伪”的过程&#xff0c;从流程到工具&#xff0c;验证工程师的终极目的都只有一个&#xff1a; 发现所有BUG&#xff0c;或者证明没有BUG&#xff0c;以保证芯片功能性能的正确性和可靠性。 验证环节对于一颗芯片的重要性也是不言而喻的&#xff1a; 从项…
阅读更多...
python爬虫指南之请求模块urllib的详细教程

python爬虫指南之请求模块urllib的详细教程

文章目录 前言一、urllib的子模块二、HttpResponse常用方法与属性获取信息urlli.parse的使用(一般用于处理带中文的url) 三、爬取baidu官网HTML源代码添加请求头信息&#xff08;重构user\_agent&#xff09; 四、扩展知识with open和open两者的区别关于Python技术储备一、Pyth…
阅读更多...
python+gurobi求解线性规划、整数规划、0-1规划

python+gurobi求解线性规划、整数规划、0-1规划

文章目录 简单回顾线性规划LP整数规划IP0-1规划 简单回顾 线性规划是数学规划中的一类最简单规划问题&#xff0c;常见的线性规划是一个有约束的&#xff0c;变量范围为有理数的线性规划。如&#xff1a; 使用matlab的linprog函数即可求解简单的线性规划问题&#xff0c;可以参…
阅读更多...
人力资源管理后台 === 角色管理

人力资源管理后台 === 角色管理

目录 1.组织架构-编辑部门-弹出层获取数据 2.组织架构-编辑部门-编辑表单校验 3.组织架构-编辑部门-确认取消 4.组织架构-删除部门 5.角色管理-搭建页面结构 6.角色管理-获取数据 7.角色管理-表格自定义结构 8.角色管理-分页功能 9.角色管理-新增功能弹层 10.角色管理…
阅读更多...
springboot实现验证码功能

springboot实现验证码功能

转载自 : www.javaman.cn 1、编写工具类生成4位随机数 该工具类主要生成从0-9&#xff0c;a-z&#xff0c;A-Z范围内产生的4位随机数 /*** 产生4位随机字符串*/public static String getCheckCode() {String base "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmn…
阅读更多...
【TinyALSA全解析（三）】tinyplay、tincap、pcm_open源码解析

【TinyALSA全解析（三）】tinyplay、tincap、pcm_open源码解析

tinyplay、tincap、pcm_open源码解析 一、本文的目的二、tinyplay.c源码分析三、tinycap.c源码分析四、pcm.c如何调度到Linux Kernel4.1 pcm_open解析4.1.1 pcm_open的主要流程4.1.2 流程说明4.1.3 调用方法 4.2 pcm_write解析 /*********************************************…
阅读更多...
文章改写工具-改写神器

文章改写工具-改写神器

当代社会&#xff0c;信息爆炸&#xff0c;写作已成为人们生活与工作中不可或缺的一环。无论是学术论文、商业报告还是日常沟通&#xff0c;文字的准确表达和精彩呈现是至关重要的。然而&#xff0c;许多人在面对写作时&#xff0c;常常为语言表达、词汇选择而苦恼。为了解决这…
阅读更多...
基于OpenCV+YOLOv5实现车辆跟踪与计数(附源码)

基于OpenCV+YOLOv5实现车辆跟踪与计数(附源码)

导 读 本文主要介绍基于OpenCVYOLOv5实现车辆跟踪与计数的应用&#xff0c;并给出源码。 资源下载 基础代码和视频下载地址&#xff1a; https://github.com/freedomwebtech/win11vehiclecount main.py代码:​​​​​​​ import cv2import torchimport numpy as npfrom tr…
阅读更多...
Dockerfile讲解

Dockerfile讲解

Dockerfile 1. 构建过程解析2. Dockerfile常用保留字指令3. 案例3.1. 自定义镜像mycentosjava83.2. 虚悬镜像 4. Docker微服务实战 dockerfile是用来构建docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本。 dockerfile定义了进程需要的一切东西&…
阅读更多...
hdlbits系列verilog解答（Exams/m2014 q4e）-46

hdlbits系列verilog解答（Exams/m2014 q4e）-46

文章目录 一、问题描述二、verilog源码三、仿真结果 一、问题描述 实现以下电路&#xff1a; 二、verilog源码 module top_module (input in1,input in2,output out);assign out ~(in1 | in2);endmodule三、仿真结果 转载请注明出处&#xff01;
阅读更多...
JOSEF 综合继电器 HJZZ-32/2 AC220V 合闸延时整定0.02-9.99S

JOSEF 综合继电器 HJZZ-32/2 AC220V 合闸延时整定0.02-9.99S

系列型号&#xff1a; HJZZ-91分闸、合闸、电源监视综合装置&#xff1b; HJZZ-92/1分闸、合闸、电源监视综合装置&#xff1b; HJZZ-92/2分闸、合闸、电源监视综合装置&#xff1b; HJZZ-92/2A分闸、合闸、电源监视综合装置&#xff1b; HJZZ-92/3分闸、合闸、电源监视综…
阅读更多...
Gitee上传代码教程

Gitee上传代码教程

1. 本地安装git 官网下载太慢&#xff0c;我们也可以使用淘宝镜像下载&#xff1a;CNPM Binaries Mirror 安装成功以后电脑会有Git Bush标识&#xff0c;空白处右键也可查看。 2. 注册gitee账号&#xff08;略&#xff09; 3. 创建远程仓库 4. 上传代码 4.1 在项目文件目录…
阅读更多...
【教学类-06-10】20231126 X-Y数字分合-分-下空左

【教学类-06-10】20231126 X-Y数字分合-分-下空左

结果展示&#xff1a; 背景需求&#xff1a; 数字分合&#xff0c;这一次空在左侧 代码展示&#xff1a; X-Y 之间的分合题-分-空在右侧 时间&#xff1a;2023年11月26日 21:46 作者&#xff1a;阿夏 import random from win32com.client import constants,gencache from win3…
阅读更多...
python之静态服务器程序开发

python之静态服务器程序开发

文章目录 Python静态Web服务器开发Web静态服务器初识搭建Python自带的静态Web服务器静态Web服务器返回固定页面数据静态Web服务器返回指定页面数据静态Web服务器多任务版静态Web服务器面向对象开发静态Web服务器命令行启动动态绑定端口号 Python静态Web服务器开发 Web静态服务…
阅读更多...
Web3.0时代：区块链DAPP将如何颠覆传统模式

Web3.0时代：区块链DAPP将如何颠覆传统模式

小编介绍&#xff1a;10年专注商业模式设计及软件开发&#xff0c;擅长企业生态商业模式&#xff0c;商业零售会员增长裂变模式策划、商业闭环模式设计及方案落地&#xff1b;扶持10余个电商平台做到营收过千万&#xff0c;数百个平台达到百万会员&#xff0c;欢迎咨询。 随着…
阅读更多...
基于DSP/SOC音乐灯效系统设计方法

基于DSP/SOC音乐灯效系统设计方法

音乐灯效系统设计方法 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)？可加我微信hezkz17, 本群提供音频技术答疑服务，+群赠送语音信号处理降噪算法，蓝牙耳机音频，DSP音频项目核心开发资料, 三种方法： （1）MIC 采集音乐信号变化，（2）直接获取SPK 模拟音频…
阅读更多...
使用char.js 柱形方式显示 一年12个月的最高气温与最低气温

使用char.js 柱形方式显示 一年12个月的最高气温与最低气温

<!DOCTYPE html> <html> <head><title>气温图表</title><script src"https://cdn.jsdelivr.net/npm/chart.js"></script><style>#myChart{width:800px;height: 400px;}</style> </head> <body>&l…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站