CSS Battle #126 - Letter A

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

#126 – Letter A

September 22, 2022

At first look, it might look odd to solve but they are just combinations of skewed rectangles. You just need to make use of skew().

As usual, we would first set the body background. We will start with the right element because it is hidden behind the other elements. Based on the stacking context, that is the first one to be coded. After testing with various widths and heights, we also test the positioning values of transform. If you see the diff image, it is almost hidden except for the border, which we need not care about since it can make you pull your hair especially when you have OCD.

The second element is a mirrored image of the first, so it does not require much thinking apart from positioning and negative skew.

The remaining elements are almost the same as the above except they need to be altered with their dimensions, skew degree, and positioning. 51.5 was just a random value after trial and error.

I think I got lucky with a 100% score since I can still see the borders in diff section. The minified version is here, play around with it:

Posted in CSS Battle
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x