CSS Battle #135 - Spikes

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

#135 – Spikes

December 8, 2022

Each of the shapes is a combination of a triangle and a one-side rounded rectangle. If you want to draw a triangle, I would suggest you first create a square with borders of different colors and then reduce the square’s width to 0. Now you can remove the unwanted border using the border-color: transparent trick. The different border colors can then be converted to one single color for the complete triangle.

We can repeat the same with other shapes by changing the position and the rotation.

There were some slight borders visible in the difference section but the score is above 600.

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