Previously, I posted an article about the techniques of CSS to realize coupons, mainly introducing several methods of drawing coupons. Although the implementation is very perfect and flexible, there are still many students expressed

“Very clever, but I still choose Chetto 🤣”

IO (codelabo.cn) is an online CSS generation tool.

Functional design

First of all, there are several types of coupons on the top, and the ICONS should be able to roughly see the specific styles

The customization options for each type are slightly different. Take the first type for example

  1. Radius indicates the size of the concave Angle
  2. Direction Indicates the Direction of the concave Angle. The value can be horizontal or vertical
  3. Position indicates the relative Position of the concave Angle. In the horizontal case, you can choose top, center, or bottom; in the vertical case, you can choose left, center, or right
  4. Offset indicates the Offset for setting the concave Angle. This Offset is set with respect to the relative position set above, and cannot be set in the middle case

Once you’ve made the adjustments, click the Copy button to copy onto the clipboard (🎉 Copied to Clipboard!). ~

The code is adaptive, so you don’t have to worry about container sizes, and is compatible with Chrome, Firefox, Safari, and mobile

In fact, you don’t need to read the instructions, just click and drag with your finger, you can probably understand what the meaning is.

Practical demonstration

Now, let’s actually demonstrate a layout like this

Implement the basic layout first

<section class="card">
    <div class="card-left">350 book ticket</div>
    <div class="card-right">
        <p class="card-info">350 book coupons for 30 yuan</p>
        <strong class="card-time">Remaining 04:48:49</strong>
    </div>
</section>
Copy the code

As you can see, the left side is fixed size, the right side is adaptive, and you can use flex layout here

.card{
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
}
.card-left{
  width: 88px;
  text-align: center;
  font-size: 24px;
  color: #F22424
}
.card-left span{
  font-size: 10px;
}
.card-right{
  padding: 16px 12px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.card-info{
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: rgba(33.32.44.0.9);
}
.card-time{
  font-size: 12px;
  line-height: 16px;
  font-weight: normal;
  color: #F22424;
  margin-top: 4px;
}
Copy the code

The results are as follows

Now add the concave effect using the online tool

Because of the splitter effect, you can choose the second type, and after some debugging, you get the following

Now copy the generated CSS and add it directly to the outer container

.card{
  /* Other styles */
  -webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, red 4.5 px.), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
  -webkit-mask-size: 100%.2px 4px;
  -webkit-mask-repeat: repeat, repeat-y;
  -webkit-mask-position: 0 -4px.87px;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}
Copy the code

The result is as follows

Codepen Coupon Demo is available online

Other features

The site is a PWA, and if you open it with Chrome or Edge, you can select “Install apps”

This opens like an application and can be used offline

Other instructions

After all, a tool is just a tool, and it can’t meet all the practical situations. If you don’t meet all the practical situations, it is recommended to read this article on CSS techniques for implementing coupons. I believe you will have more experience

XboxYan/ Coupon: 🎫 Generate Coupon-ui CSS code (github.com) to make an issue. If you like it, please like it ~❤️❤️❤️

I wish you all a happy use, enjoy~