- Published on
- ·5 min read
Creating Square Brackets ([ ]) Shaped Like Lottery Ticket Numbers(css)
I apologize in advance for any awkward expressions in English.
English is not my native language, and I have relied on ChatGPT's assistance to proceed with the translation.
Quick Access to the Service
Content to Explain
Do you happen to remember the square brackets on a lottery ticket? Well, while creating the lottery number generator service linked above, I decided to design the user interface in a style reminiscent of a lottery ticket.
The image on the left is an actual lottery ticket, and the one on the right is a screenshot of the result created using CSS.
Implementation
HTML
<div class="number-wrap"><span class="number">1</span></div>
<div class="number-wrap on"><span class="number">2</span></div>
<div class="number-wrap"><span class="number">3</span></div>
<!-- Subsequent numbers omitted ... -->
CSS
The key to this design is adding an orange border to the .number-wrap that wraps the numbers and covering the orange border area with a background color in ::before / ::after.
You can experiment with removing ::before / ::after or adjusting the width / left / right properties to see the changes.
/* Color Definitions */
:root {
--color-black: #000;
--lotto-color: #e43a3c;
--primary-background: #fafafa;
--color-white: #fff;
}
/* This part wraps the numbers and adds an orange border. */
.number-wrap {
position: relative;
display: inline-block;
width: 29px;
height: 47px;
border: 2px solid var(--lotto-color);
color: var(--lotto-color);
font-size: 14px;
font-weight: bold;
align-self: center;
justify-self: center;
text-align: center;
vertical-align: middle;
margin-top: auto;
}
/* When a number is selected, mark it in black. */
.number-wrap.on {
background-color: var(--color-black);
color: var(--color-white);
}
/* Remove the left side to create the bracket shape, adjust left and width according to border width */
.number-wrap::before {
content: '';
position: absolute;
left: -2px;
top: 20%;
bottom: 20%;
width: 2px;
background-color: var(--primary-background);
}
/* Remove the right side to create the bracket shape, adjust right and width according to border width */
.number-wrap::after {
content: '';
position: absolute;
right: -2px;
top: 20%;
bottom: 20%;
width: 2px;
background-color: var(--primary-background);
}
/* Number Display Section */
.number {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Check it on JSFiddle
https://jsfiddle.net/sosone/end94qya/
Related Post
If you're curious about how to implement a similar shape in Android, you can refer to the following post:
Creating Square Brackets ([ ]) Shaped Like Lottery Ticket Numbers (Android)