Kevin Powell - Community•4mo ago

Help creating a Curved header

Hi everyone, I have been asked to investigate how possible it is to re-create our current bland header into something like one provided in the picture here. I've tried playing around with border-radius and even clip-path cause I've seen that suggested, but to no luck yet. It's just that part that bothers me, rest of it I have from previous design, but that top border that moves into curved shape is out of my league right now. I was wondering if anybody has a good solution to a design like this? I've never encountered it before. Thank you anyone that could help.

13 Replies

Choo♚𝕂𝕚𝕟𝕘•4mo ago

Have you considered SVG? You could either make the entire white background an SVG or just do that for the curved part, since there is no content inside that area. Making the whole thing a single SVG tends to be better, because you may get a tiny gap if you do that only for the curved part.

ἔρως•4mo ago

it's possible to do it with an ::after with a clip-path

MarkBoots•4mo ago

here with a svg mask (size adjustable in css with a custom property) https://codepen.io/MarkBoots/pen/yLdaGNb

Squeemeister•4mo ago

Is there a reason you can't just use a .png?

ἔρως•4mo ago

images are a pain

MarkBoots•4mo ago

images get pixelated when resized, svg and clippaths are scalable without loss. also, any small correction needs a new image, while in svg/css it's way easier to control. And you don't need to host it

ἔρως•4mo ago

images also need you to make extra network trips, which can be super horrible in high ping situations and yes, any change you need to do you need to generate a new image you also have to consider a fallback in case the image fails to load you also need multiple versions of the same image if you want to avoid issues with everything getting blurry if the height changes for some reason, the image won't match up wit the content and the height will change due to browsers' differences in rendering there's no good reasons to use an image in this situation there's only good reasons why spacing images died off a quick death

13eck•4mo ago

Several messages have been deleted. Please keep discussions civil and on-topic.

DurbemOP•4mo ago

Been a busy day so just had a chance to look up the replies. Thank you very much for suggestions and example! That looks just like what I need. I will work on implementing it tomorrow and make it work with that I have. Appreciate it! If it's not too much of a hassle, how would I go about doing it with an ::after? Just trying to learn of more ways to do stuff like this.

ἔρως•4mo ago

something like this:

div::after {
  content: "";
  background-color: white;
  clip-path: path(" ... ");
}

div::after {
  content: "";
  background-color: white;
  clip-path: path(" ... ");
}

possibly the polygon function is a better match for what you need, if it changes in size

DurbemOP•4mo ago

Alright, thanks! I'll check that one tomorrow as well :thumbup:

ἔρως•4mo ago

you're welcome

DurbemOP•4mo ago

Hi again guys! I finally had the chance to work on this today at work, and after going back and forth a bit, did it via the svg backgroundImage. However I have a problem when zooming in. Svg does not seem to scale accordingly. Goes from what you can see in the first image (ignore the details, still WIP on that svg)), to what you can see in the second picture. Per some suggesetions I found online, I tried removing background size: "cover" but it did not help. This is how my piece of JSX looks like in that part (cut some parts cause of limitations to message size)

<div className='flex justify-between items-center p-[0.5rem_0.5rem]' style={{ backgroundImage: url(${topnavSvg}), backgroundSize: 'cover', backgroundRepeat: 'no-repeat', }} > // child 1 here // child 2 here </div>

Gaming

Programming

Help creating a Curved header