Well, last week Iβve created a post about Gradient borders with curves and 3D animation in CSS, which was a trial to clone the Nextjs conf ticket, and fortunately a lot of people liked it (check it from here), but the major comments that come to me were that there are better ways to implement the half-circles in both sides of the ticket other than the one I used in my tutorial, which is fine, in this article Iβm going to show you 5 other different ways to do that very easily π
The above is the overall result that we need to reach in the following 5 ways:
Using 2 divs inside each other and a cover (original solution).
Using pseudo-elements border transparent
Using clip-path
Using a cross div
Using Figma to design SVG and use it
1. Using 2 divs inside each other and a cover
That was basically the way I used in the last post to make that half-circle design, that was basically as follow:
HTML code:
CSS code:
That was the way I did it in the last post, and Iβve already admitted it that was not the best way, one more thing that could be enhanced in this solution is to make the container overflow: hidden and it should save some code as well, then I started to get some suggestions from readers and watchers of my videos and these other ways are coming next.
In this one, we can get rid of the cover and also no need to put pseudo-elements inside each other, so the new HTML will be:
Now we removed the divs (the covers) and we decided to make only pseudo-element for the main container .ticket, as follow:
As you can see, instead of giving it a colored background, we gave it a black background and a colored border, but turn the color of the border for the top and the left to be transparent, and rotate it based on the side with -45deg and 135deg, so in the end here is the whole CSS code for this way:
Well this suggestion was really cool, using this great feature in css clip-path, it should be a complete circle with a whole ring and use clip-path to cut it, so the HTML will remain as follow:
And the CSS for making the whole circle first will be:
Here is how it looks till now:
Then to cut these rings we will do:
This property is mainly cut the element to the required shape, so the final look will be the desired one, worth mentioning that I found this online tool π that help you play with the clip-path to get what you want easily.
I just found this one a bit weird but it works very well, especially in case of a ticket without a border like ours, but in some cases it could be the best solution
Basically, we make a div with a smaller width and put the pseudo-elements in the right and the left to cover the sharp border.
then we put it in between a div in the top and another one in the bottom, so in total it looks like a ticket layout, and even you can make it with a split color as in the following brilliant examples by our friend.
In this one we are going to make use of a Free application called Figma π to design the ticket layout first and then we export that as an SVG element, so we can put it into our code.
to be honest, I thought that it will be tedious to learn how to do that on Figma, but it turns out to be the easiest way of them all, check out the following way to easily do that and export it as an SVG to be used in code.
Wow, it was really really easy to do and what we are going to do now is to add the exported SVG into our code inside the .ticket container and continue working, the HTML will look like:
and no need for CSS code for the outer layout anymore, Thatβs magical.
There are always different ways to implement a UI on the web, none of them should be the best except if others donβt fulfill the need, just implement the UI with all the required functionality the way it should regardless of the tools and steps you decide, and ALWAYS keep trying new stuff, if you have one more way try to tweet this post and mention me @med7atdawoud π and letβs continue the discussion there.