用HTml+csss实现优惠券

最新推荐文章于 2024-05-02 22:47:30 发布

原创

最新推荐文章于 2024-05-02 22:47:30 发布 · 3.8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#优惠券 #锯齿 #前端

本文详细介绍使用CSS3多背景拼接技术制作优惠券的方法，包括波浪边框效果的实现，以及具体代码示例。

优惠券主要是做两边的波浪，主要用到的是css3多背景拼接，效果图：
在这里插入图片描述
代码：
html:

    <div class="list">
        <div class="item">
            <div class="left">
                <div class="block">
                    <el-row>
                        <el-col :span="11">
                            <p class="first"><span>￥</span><span>50元</span></p>
                            <p class="second"><span>满100可用</span></p>
                        </el-col>
                        <el-col :span="13">
                            <p class="third"><span>美食优惠券</span></p>
                            <p class="fourth"><span>有效期：2019.10.2020.10.22</span></p>
                        </el-col>
                    </el-row>
                &