1

I'm trying to recreate the attached header image (black outline just for reference) in code - as you can see there's a hump in the centre facing down.

What would be the best way to go about this in your opinion?

Would it be using an image?

I've tried using Clip-paths but I'm struggling to get it right especially with the bottom border and in all honesty the percentages are driving me crazy.... Is there a more simple way?

A logo will be sitting in the extended section.

Black outline just for reference

RuFFCuT
  • 307
  • 11
  • 31
  • Try svgs, its difficult to achieve these types of shapes in CSS – Prathamesh Koshti Dec 11 '20 at 02:39
  • I mean... you literally just created an image for this question. No but in all seriousness, an image is just going to be the easiest way to do it. CSS will drive you insane. (For strange things like this refer to [codepen](https://codepen.io/)... look through some CSS on there and you will see what I mean) – Octal Dec 11 '20 at 02:41
  • @Octal I agree it's probably going to be the easiest way. The issue I have with it is, how will it render on large screens that are wider than the image? – RuFFCuT Dec 11 '20 at 02:52
  • One thing you could do is have the "divit" be an image, and have the other two sides divs that stretch to fit the width. That, or you could simply stretch the image (however that will widen the divit - not sure if you care about that). – Octal Dec 11 '20 at 15:16

0 Answers0