CSS Battle #128 - Letter N

0 %
Manoj Kumar
Freelance Web Developer
"One Is All, All Is One"
  • City:
    Chennai
  • Country:
    India
  • Age:
    27
Lifetime score board
Shows
Music
Games
Current Interest Levels
Web Development
Cricket
Chess
Fitness
Movies & TV Series
Cooking
Trading
Cybersecurity
  • Ambivert
  • Nocturnal
  • Gym Junkie
  • Tech Enthusiast
  • Teetotalism

#128 – Letter N

September 23, 2022

Initially when I thought this is straightforward, maybe since I just woke up and am still in sleepy mode. Later when I had to insert the middle element, it was not right as overlapping was weird.

So we go back to the correct way. We include the right element first because of the stacking context.

We include a similar rectangle of different color and height as the midsection. We also need to add some skew() to the mid rectangle. The last element on the left is just replica of the first element but has a different position.

Finally, we get the confetti but I still see the border of the mid section in diff image. That could be because of the browser rendering of skew. Play around with the minified code:
Posted in CSS Battle
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x