【css】实现一张折扣券

最新推荐文章于 2024-07-17 16:26:33 发布
最新推荐文章于 2024-07-17 16:26:33 发布
阅读量350 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/111498075
版权

文章目录

第一种实现方式

使用flex布局实现文本水平垂直居中。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
    .ticket{
        display: flex;
    }
    .left,.middle,.right{
        height: 100px;
    }
    .left{
        width: 100px;
        background: blanchedalmond url(./images/icon_ticket_2.png) no-repeat center;
        border-bottom-right-radius: 50px;
        box-shadow: 50px 0 0 coral ;
    }
    .middle{
        width: 300px;
        background-color: coral;
        color: white;
        font-size: 36px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        border-radius: 6px;
        border-right: 2px dashed white;
    }
    .discount{
        font-size: 48px;
        font-weight: bolder;
    }
    .wrapper{
        display: flex;
        align-items: center;
    }
    .right{
        width: 120px;
        background-color: coral;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 36px;
        color: white;
        border-radius: 6px;
    }
    </style>
</head>
<body>
    <div class="ticket">
        <div class="left"></div>
        <div class="middle">
            <span class="wrapper">
                <span class="discount">5.2</span><span class="text">折</span>
            </span>
            <span>商品券</span>
        </div>
        <div class="right">
            <span>购</span>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

第二种实现方式

使用 text-align:center 实现文本的水平居中；
使用 hight等于line-height、vertical-align:top实现文本的垂直居中。

<!-- test.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
    div{
        float: left;
    }
    .left{
        width: 100px;
        height: 100px;
        background: blanchedalmond url(./images/icon_ticket_2.png) no-repeat center;
        border-bottom-right-radius: 50px;
        box-shadow: 50px 0 0 coral ;
    }
    .middle{
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: coral;
        color: white;
        font-size: 36px;
        border-radius: 6px;
        border-right: 2px dashed white;
    }
    .discount{
        font-size: 48px;
        font-weight: bolder;
        vertical-align: top;
    }
    .right{
        width: 120px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: coral;
        color: white;
        font-size: 36px;
        border-radius: 6px;
    }

    </style>
</head>
<body>
    <div class="ticket">
        <div class="left"></div>
        <div class="middle">
          <span class="discount">5.2</span>折 商品券
        </div>
        <div class="right">
            <span>购</span>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

改进版的折扣券
radial-gradient()
示例1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
    div{
        width: 100px;
        height: 100px;
        margin: 10px;
    }
    .box{
        background: orange radial-gradient(white 50px,transparent 0);
    }
    .box2{
        background:orange  radial-gradient(circle at top right,white 50px,transparent 0);
    }
    .box3{
        background: orange radial-gradient(circle at top right,white 10px, transparent 0) top right;
    }
    .box4{
        background: orange radial-gradient(circle at bottom right,white 10px,transparent 0) bottom right;
    }
    .box5{
        background: radial-gradient(circle at bottom right,white 10px,transparent 0) bottom right,
        radial-gradient(circle at top right, white 10px,transparent 0) top right;
        background-color: orange;
    }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>
</html>

在这里插入图片描述

示例2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
    .left{
        width: 200px;
        height: 100px;
        margin: 10px;
        background: radial-gradient(circle at top right,white 10px,transparent 0) top right,
        radial-gradient(circle at bottom right,white 10px,transparent 0) bottom right;
        background-color: orange;
    }
    .right{
        width: 100px;
        height: 100px;
        margin: 10px;
        background: radial-gradient(circle at top left,white 10px,transparent 0) top left,
        radial-gradient(circle at bottom left,white 10px,transparent 0) bottom left;
        background-color: orange;
    }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

在这里插入图片描述

示例3
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
    .container{
        width: 300px;
        height: 100px;
        background-color: orange;
        display: flex;
    }
    .left{
        width: 60%;
        background: radial-gradient(circle at top right,white 5px,transparent 0) top right,
        radial-gradient(circle at bottom right,white 5px,transparent 0) bottom right;
    }
    .right{
        width: 40%;
        background: radial-gradient(circle at top left,white 5px,transparent 0) top left,
        radial-gradient(circle at bottom left,white 5px, transparent 0) bottom left;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

示例4
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
    .container{
        width: 300px;
        height: 100px;
        background-color: orange;
        display: flex;
    }
    .left{
        width: 60%;
        background: radial-gradient(circle at top right,white 5px,transparent 0) top right,
        radial-gradient(circle at bottom right,white 5px,transparent 0) bottom right;
    }
    .right{
        width: 40%;
        background: radial-gradient(circle at top left,white 5px,transparent 0) top left,
        radial-gradient(circle at bottom left,white 5px, transparent 0) bottom left;
    }
    .left::after{
        content: "";
        display: block;
        height: 90px;
        margin-top: 5px;
        border-right: 2px dashed white;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

改进版
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
    .ticket{
        display: flex;
    }
    .left,.middle,.right{
        height: 100px;
    }
    .left{
        width: 100px;
        background: blanchedalmond url(./images/icon_ticket_2.png) no-repeat center;
        border-bottom-right-radius: 50px;
        box-shadow: 50px 0 0 coral ;
    }
    .middle{
        width: 300px;
        background: radial-gradient(circle at top right,white 5px,transparent 0) top right,
        radial-gradient(circle at bottom right,white 5px,transparent 0) bottom right;
        background-color: coral;
        color: white;
        font-size: 36px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
    .discount{
        font-size: 48px;
        font-weight: bolder;
    }
    .wrapper{
        display: flex;
        align-items: center;
    }
    .right{
        width: 120px;
        line-height: 100px;
        text-align: center;
        background: radial-gradient(circle at top left,white 5px,transparent 0) top left,
        radial-gradient(circle at bottom left,white 5px,transparent 0) bottom left;
        background-color: coral;
        font-size: 36px;
        color: white;
        border-radius: 0 6px 6px 0;
        position: relative;
    }
    .right::before{
        position: absolute;
        left: 0;
        content: "";
        height: 90px;
        margin-top: 5px;
        border-left: 2px dashed white;
    }

    </style>
</head>
<body>
    <div class="ticket">
        <div class="left"></div>
        <div class="middle">
            <span class="wrapper">
                <span class="discount">5.2</span><span class="text">折</span>
            </span>
            <span>商品券</span>
        </div>
        <div class="right">
            <span>购</span>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

richest_qi
关注
专栏目录
CSS实现优惠券特殊样式的技巧
JackieDYH的博客
03-24 3345
Web 开发过程中，总会遇到各种各样的布局，比如下面的各种“优惠券”，一起来看看吧 一、最佳实现方式 首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下 基本语法很简单，和background的语法基本一致 .content{ -webkit-mask: '遮罩图片' ; } /*完整语法*/ .content{ -webkit-mask: '遮罩图片' [position] / [size] ; }...
css3实现优惠券效果（向内凹的圆）
热门推荐
pinena的博客
04-30 1万+
背景色和自身（优惠券）的颜色会改变，实现向内凹的圆效果，效果图如下。如果叫设计师切好几十种背景图是很不现实的，只能用代码来实现，性能会比较好。随着背景色的改变，向内凹圆的背景色也要跟着变，因此，向内凹陷的部分只能设置成透明。 实现如下三种情况： 1、第一种情况（纯色） 自身（优惠券）的颜色是纯色的，这个实现起来比较简单，主要代码如下： <div class="box"&gt...
使用css创建一个优惠券的方法
12-11
需求场景 添加优惠券类目,展示用户的优惠券 常见的设计样式如下图,核心为半圆   分步拆解 优惠券的特点是带有反向圆角,为了展示效果更好,适配多种场景,不推荐使用背景图片形式,建议使用 css . 网上有几种方案: 一种是 boder+clip 的形式,裁剪出4个小半圆角,拼凑在一起 一种是 radial-gradient 径向渐变,相对上一种需要考虑其兼容性 一种是使用背景图片,特点是加载稍慢,体验比 css 差,兼容性好 具体的代码这里就不一一演示了 参考其他网上内容: https://www.jb51.net/css/604652.html 注意细节 有一点要说明的是: 一定要注意细节,
css绘制卡券优惠券_CSS 实现优惠券样式
weixin_42439576的博客
01-14 1333
本文将介绍如何使用 css 中的 radial-gradient 实现如下图所示的优惠券样式效果：绘制基本样式首先，我们绘制出优惠券的基本样式，这很简单，就不多说了。12345678910111213141516171819202122232425满 100 减 30/* scss */.voucher {width: 600px;height: 200px;display: flex;.left...
css实现优惠券
weixin_40863414的博客
10-29 333
css实现优惠券，是一个很常见的功能，下面是用两种radial-gradient实现的优惠券效果： 两种实现的方式稍微不同，适应不同的样式需求，更多详情请参考文章： 文章地址： css实现优惠券
用纯css来实现一个优惠券
weixin_34320724的博客
07-20 2139
查看原文可以有更好的排版效果哦 前言 我们在平时的网页中，经常会见到这样的优惠券或者其他的券（特征就是会有反方向的圆角）。 可能大部分前端人员为了简单，直接采用图片的方式，直接把整张图作为背景。其实这也没什么不好的，简单，方便，还没有兼容性问题，ie6跑起来都没得问题。 如果不考虑那些低旧浏览器的话，还是有办法直接用css来实现，有几个...
css折扣样式
ansinie的博客
02-18 850
<style type="text/css"> #Discount{ border: 1px solid red; width: 200px; height: 50px; text-align: center; font-size: 20px; line-height: 50px; } #Discount>div{ float: left; } #Discount>#left{ ba
如何用纯 CSS 实现优惠券效果
CodeFunTeam的博客
07-15 3550
CODE.FUN TAEM
CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效
最新发布
uu0216的博客
07-17 2439
相信你可能已经在网络见过类似这样的流光的按钮，在羡慕别人做的按钮这么酷的时候，你有没有扒一下它的源代码的冲动？或者你当时有点冲动，却转眼忘却了。今天，刚巧，你又看到它了，今天跟我一起扒一扒它的源代码。左边按钮分析：1. 圆角按钮的光线效果，这个稍微费劲些。难点：动画层的路径移动2. 倒影。
纯CSS优惠券效果
03-18
本文将深入探讨如何使用纯CSS技术来实现一个动态、美观的优惠券效果，这对于提升网站的交互性和销售策略都有积极的影响。 纯CSS优惠券效果是一种不依赖JavaScript或者其他编程语言，仅通过CSS样式表实现的优惠券...
CSS实现优惠券边沿打孔效果
01-19
项目中用到了这个边沿打孔的效果，尝试下来使用纯css写的这个样式，在这里分享一下： 效果大致如图 分步实现思路： 1，先画两个带圆角的框，A和B（A、B分别需要加投影效果，图上没有做） 2，在B的左右两条缝隙的地方分别画一排圆（其实是正方形用了50%的圆角），圆填充色和背景色相同（此处背景色是白色，所以圆的填充是白色） 3，给圆孔加上内阴影，达到真实的打孔效果，这里用到的是这样的css： box-shadow:0 1px 1px rgba(0,0,0,0.2) inset; 4，此时B右边的一排圆孔由于加上了内阴影的关系，显得多了右半边，这里需要再对多余部分进行处理 再使用一块和背
纯css3优惠券 css 无js
09-02
纯css3书写的优惠券，自适应屏幕大小
css实现优惠券样式
m0_60189088的博客
06-12 705
css实现优惠券样式。
纯css实现优惠券效果
Pluto
01-05 2142
最近UI小姐姐休假了，优惠券缺了我几个切图，不好意思打扰人家，就寻思着，干脆用css直接手写吧。 这里记一下实现思路。 先来看看效果图： 看着还行叭。 主要是这几个地方的样式： 左上角书签； 优惠券票孔； 右上角状态标签。 1. 左上角书签 书签这里又分成两个部分，一部分是整体的半圆角矩形，一部分是左上的那个小折角。 半圆角矩形很好实现： height: 20px; border-radius: 0 20px 20px 0; 小折角是利用绝对定位和skew变换： display:
关于价格的折扣的css
qq_25175063的博客
12-07 1094
  一、今天在做一个销售软件时，用到折扣价这个东西，于是网上看了一下css代码。在这里记录一下吧 二、不多说，直接上代码吧 .xa-panel-div-p-price { text-decoration: line-through; font-size: small; width: 10%; margin: 0.5rem 0 0 2rem; } 三、其中起作用的就是 text-decoratio...
CSS实现各种优惠券效果
JavaScritp
04-29 1910
CSS实现各种优惠券效果。
html css制作简单优惠卷
m0_68605510的博客
12-08 823
使用html css实现简单的优惠卷页面
用纯CSS实现优惠券剪卡风格
tllxltw27的博客
10-05 1120
在做商城类项目的时候，我们可能都会经历过“优惠券”这类需求，笔者在过往工作中，都是直接要求UI切图来实现，直到有一天产品告诉我一个奇思妙想：这个优惠券的宽度会随内容变化的！一下子让我陷入了人生的大思考，这样图片方式可不好整呐，因此萌生一个想法：能不能用纯css实现这些效果呢？
纯css写图形 优惠券
qi__lu的博客
10-19 953
先说图形，最最最基础的图形就是长方形（正方形为特殊长方形），设置宽和高即可，加上个background，就出来了，这里就不贴图了。 圆形和椭圆形 圆形是在正方形的基础上，加了个border-radius: 50%的圆角 <div class="circle"></div> <style> .circle{ width: 50px; height: 50px; background: #e9337c; border-radius: 50
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值