← All elements
<div class="gr"><i class="h"></i><i class="v"></i><span class="bow"></span><b>Surprise</b></div>About this card
A present-style card with crossed ribbons and a bow made from rotated rounded squares.
How it works
Two yellow bars cross at the centre to make the ribbon. The bow is a pair of pseudo-element loops built from thick borders with three rounded corners, rotated in opposite directions, and a white pill label sits at the bottom.
Ways to customise it
- Change the wrapper colours.
- Edit the label text.
- Make the ribbon thicker by raising 22px.
Good to know
It is decorative, so place any important offer text outside the drawn parts. The shapes scale with their pixel sizes.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.