Frontend Adventures: making a coupon ticket using CSS
How it all started
About a month ago, I was given this Figma design to work with. It was a complete revamp of how we render coupons and part of a pilot program we planned to run. Naturally this seemed like a CSS challenge so I started Googling.
The first thing I searched for was clip-path, which is a CSS property. I had used it before and thought I could use it again. I found this nice article that gave me a good refresher. The problem was, clip-path can only provide traditional shapes. It can clip edges and make a triangle, crop corners and make a circle, etc. However, it cannot create half circle cutouts resulting in the shape of a coupon ticket, like the Figma design shown above.
Okay, I can’t use clip-path… what else can do circle-ly things?? Is this possible?
Well, during my Googling I stumbled upon this other nice article. It gave me the alternative idea of using svg shapes and svg masks. The problem with this approach was that things would get really ugly because I needed to add text and icons when rendering a coupon. Then I would need to adding padding and spacing for each svg element. I also was not fully familiar with using svg’s… Basically I felt like this would be my last resort if I couldn’t find another better option.
Okay… hmm
At this point I decided to go look up how to make gradients because I wanted to search other things to feel like I was making progress. Apparently this was a good idea because I stumbled upon radial-gradient, which with some clever usage of divs, can be used to create the ticket shape I was looking for.
I’ll leave it as an exercise to the reader to think about how to create the ticket shape with 3 div’s and radial-gradient.
Final result:
Pretty spot on to the Figma designs!!
Bonus: Make the experience mobile friendly!
Anyway, tl;dr I used radial-gradient + a few div’s + linear-gradient to create a nice coupon ticket shape.
Also, here are some links to create cool shapes in CSS:
