同事帮我用css做出炫酷的卡券效果，深感崇拜啊-CSDN博客

本文链接：https://blog.csdn.net/qq_43623970/article/details/107160633

本文介绍了如何使用CSS实现炫酷的卡券效果，从基础样式到多个升级版，详细展示了Less和Scss的应用，最终选择了一个酷炫的样式，并得到了认可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前几天，我接到了一个项目，模块中要写一个卡券效果，当时没有图片，也就是要用css来实现，当时我是懵逼的，也没有写过这样的，一时间不知道怎么写，毕竟要写的像UI设计的一样美观。我就只好求救我的大神级别的同事了。不仅css玩的溜，人家JavaScript玩的更溜，阁下实在是佩服。

常见的卡券样式如下：

同事二话没说，直接给我写了一种，那真的是快如闪电就给我实现了一个。是用伪元素实现的

使用伪元素实现（Less 版本）

ticket.less

.ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) {
   
  position: relative;
  box-sizing: border-box;
  padding: 0 @r;
  width: @width;
  height: @height;
  background-clip: content-box;
  background-color: @color;

  &::before {
   
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: @r + 1px;
    height: 100%;
    background: radial-gradient(@r circle at left @top, transparent @r, @color @r + 1px);
  }

  &::after {
   
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    display: block;
    //这里的 @r + 1px 是为了避免某些百分百比缩放页面时，出现空隙
    width: @r + 1px;
    height: 100%;
    //这里的 @r + 1px 是为了防止出现锯齿
    background: radial-gradient(@r circle at right @top, transparent @r, @color @r + 1px);
  }
}

.parent {
   
  .ordinary-mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28);
}
.child {
   
  line-height: 200px;
}

App.js

import React from 'react';
import './App.css';
import './ticket.less';

function App() {
   
    return (
        <div className="App" style={
   
            {
   
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                height: 600
            }
        }>
            <div className={
   'parent'}>
                <div className="child">666</div>
            </div>
        </div>
    )