CSS coupon online generation tool

I posted an article CSS to achieve coupons skills , mainly introduced several methods of drawing coupons, although the implementation is very perfect and very flexible, but there are still many students said

"Too clever, but I still choose to cut the picture 🤣"

For this reason, such an online CSS generation tool Coupon.io (codelabo.cn)

feature design

First of all, there are several types of coupons at the top. The specific style should be roughly seen from the icon.

The customization options corresponding to each type are slightly different, take the first type as an example

1. Radius means size
2. Direction indicates the direction with a concave angle, horizontal and vertical can be selected
3. Position represents the relative position with recessed corners. In the horizontal situation, you can choose top, center, or bottom , and in the vertical case, you can choose right
4. Offset represents represents recessed corner offset , the offset is a relative position with respect to a given set above, can not be provided in case of centered

After the adjustment is completed, click the copy button to copy to the clipboard (🎉 Copied to clipboard!)~

The code is adaptive, so there is no need to pay attention to the container size, and it is compatible with Chrome, Firefox, Safari and mobile

In fact, you don’t above description, 1609e4a30b579f move your finger, just click and drag you will probably understand what it means.

Demonstration

Now let’s actually demonstrate, for example, such a layout

First implement the basic layout

<section class="card">
    <div class="card-left">350书券</div>
    <div class="card-right">
        <p class="card-info">满30元送350书券</p>
        <strong class="card-time">仅剩 04:48:49</strong>
    </div>
</section>

It can be seen that the left side is a fixed size, and the right side is adaptive. Here you can use flex layout

.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;
}

The result is as follows

Now add the concave corner effect through the online tool

Because of the dividing line effect, you can choose the second type. After some debugging, you can get the following

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

.card{
  /*其他样式*/
  -webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, red 4.5px), 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;
}

The results are as follows

You can visit codepen coupon demo

Other features

The site is a PWA , if you use Chrome or Edge to open it, you can choose "install application"

In this way, it can be opened like an application and can be used offline~

other instructions

After all, tools are just tools and cannot meet all practical situations. If they are not satisfied, it is recommended to read this CSS realization coupon technique , I believe there will be more experience

Finally, if you have related questions or comments, you can go to XboxYan/coupon: 🎫 Generate Coupon-UI CSS code (github.com) mention issue , if you think it’s good, please like, favorite and forward.

I wish you all a happy use, enjoy~