CSS Battle #139 - Lamp

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

#139 – Lamp

December 21, 2022

The easiest part is to paint the background and create the rectangle.

We can create another rectangle whose width would cover the bottom two points of the lamp head.

You can create a slanted rectangle using transform: rotate() and an inverse slanted rectangle on the other side to create the slanted version of the lamp head.

I can still see little borders on the diff image but doesn’t matter when our mission is complete.

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