#133 – Spiral
December 6, 2022
I was initially searching on YouTube for the solution. Got confused with that but got a hint because I was thinking there is a direct way to implement the circle-shaped border.
Anyway, I will start with painting the body background and then creating a transparent circle with border colors transparent on the required side. We can rotate it to place it as per the required diagram.
We can repeat the same with other portions by changing the width, height, position and the rotation angle.
The missing semi-circles can be placed there with a tricky linear-gradient which has one half colored and the other half transparent.
It’s not perfect since I could see some small borders in the diff section but the score is perfect 🙂
Posted in CSS Battle
Subscribe
Login
0 Comments