Please explain how to make a perfect circle
I'm trying to make this a circle but I'm lost on the border radiuses I'll have to use for it, or if there is an even simpler method of doing so
https://codepen.io/brightDN/pen/jOQoxpJ
20 Replies
it's annoying, but the way I usually do that is by just setting the border radius to something ridiculous like 999px
100% isn't enough
you can use border-radius : 50%
normally yes, if your element is square, but this is three elements trying to make a pokeball
You could set the border-radius :50% on the parent and add overflow:hidden.
Then remove the radius that you have set on the two halves.
see, now that is a good solution 😄
I think it's easier and cleaner that way, too
or maybe I can just use one element and just use a
linear-gradient
? that would do the trick actuallyalso an option
I have no clue why I wanted to use 3 elements if I can just use one... xd
bc they also need to hold a fucntion so I might as well use linear gradient, it'll ease the js code too
bc with 3 elements the code for it I already had in place doesn't work propelry
Apologies for my spelling
Typing too fast
Been on a spree of inputting data xd
you could've put the listener on the parent
but you're right, a gradient is a cleaner solution
Yeh but, basically here's how it went:
I first made all the functions, so I didn't do styling yet, just build the skeleton of the webpage
So I made something I could quickly call upon, so I just made a button
at first it was just a button, when clicked on a function would run
The issue is, with what I replaced it with, it has multiple layers, its just a few lines to the javascript, but I feel like both my html and js would be cleaner if I just use a linear gradient and remain 1 element
So basically, my website functionalitywise completely works
But looks... Yeh not yet
Alright thanks
Speaking of clean code... Could um anyone give me tips on how to make my javaScript cleaner?
It's a mess
@.brightie, heres a solution revolving around your original code structure 👍, i didn't put it on codepen just in case i delete the pen in the future, this way you always have it as a reference.
HTML
CSS
anyone else is for sure free to improve this for them if you see fit 😄
wait may I have an explanation of why you opted for a flex?
is it so you only have to change the height on 1 of the 3 elements or what is the reason?
also thank you, tho I think ill stick with the
1div solution with a linear gradient
its also way simpler to create via js only needing 3 lines
creation , adding of classList, appending
the solution w/ the 4 objects would see this js creation multiply in lines needed
Yeah for sure, it was an easier way to get even sized sections inside without having to play around with height values for all three sections, flex also makes it responsive so if i increase the size of the parent the sizes of the sections inside adjust.
ahh makes sense, didnt think of using flex in such manner yet
It's all good, maybe it helped you learn a method for the future 👍🏻
it sure has
I would've done it element by element
Ayy good stuff, ah yeah it can be easy to do it like that but responsiveness is key 👍🏻
so looks like you may have moved to a different approach but
border-radius:50% 50% 0 0 / 100% 100% 0 0;
would do the trick for your top element and border-radius: 0 0 50% 50% / 0 0 100% 100%;
would work for the bottom.You can just add a border radius on the parent and hide the overflow rather than having a border radius set for the individual sections 👍🏻