CSS Battle #134 - Wig

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

#134 – Wig

December 4, 2022

First we can implement the easier parts, coloring the background and creating a semi circle. I think we can create semi circle in other ways as well but I chose the linear-gradient method. Before this battle, I use to create with transform property but now I am going to use the translate property directly.

We can also create two rectangles of the widths half of the semi-circle. The bottom right border can be 50%. Similarly, bottom left border can be 50% for the second rectangle.

If you can see, I got lucky with 100% score. There are some minor differences in the diff section. But I will take it 😀 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