I’m trying to create the image of an animal in CodePen and I’m starting with a hexgaon shape but I can’t get the shape to move from the very most top left positionality. I’ve tried increasing the positive value for the top property in my container, but that distorts my shape.
How can I move my shape to the middle of the screen without distorting the shape? (A URL is below)
Hi,
Change position: relative to position: absolute; for #container selector and also add the below properties to #container
top:0;
bottom:0;
left:0;
right:0;
This will bring your shape to the middle of the screen
I have ears and eyes, but I’m wondering how I might be able to round out the head and jaw and make it less pointy.
I’d thought of using border-radius, but that’s for circular objects (and it didn’t do anything when I used it anyway). How might I go about molding the object and making it a bit smoother?
Border-radius is for rounding any corners, not just for making circles. It accepts 4 arguments representing top-left corner, top-right corner, bottom-right corner and bottom-left corner. Goes clockwise. So, you can specify exactly which angle(s) you want to round. Here’s an example where I made a rectangle, skewed it, and then applied border-radius just to the first angle. You can use this technique to smooth out angles on different parts.
One other question. I’ve added a transform property to my dog that causes its eyebrows to raise when you hover. However, when I do this, a little black line appears on the side of its forehead and there is this strange flickering phenomenon happening in the middle of its forehead.
What is causing this? My guess is that, because I have so many different elements set to position: relative that this is cause issues that bring about this phenomenon…but might there be another reason I’m not thinking of?
maybe you should learn how to use css variables and then use a @keyframes to move it around. learn it on fcc in basic css and applied visual design