2

Does anyone have any examples of live websites with round headers? Similar to this: http://www.nasty-creatures.com/

I'm working on something for a client and have come up with a design with a round header, however I need some different examples of live sites so that I can see how they're built. I've scoured the web and can't find any decent examples.

If anyone can steer me in the right direction, I would greatly appreciate it!

  • That header is rectangular (where the menu is). The image below it is circular, but that's not a header. I can't think of any sites with a round header – Manly Nov 16 '16 at 22:53
  • 2
    I've no idea what this will turn up, but try pinning this on Pinterest, and then returning to look at it from another account or different browser to see if they find any recommendations of similar layouts with their algorithms. This might take a few days for their system to absorb the image if it's new to them. – Confused Nov 16 '16 at 23:05
  • 1
    If you inspect the site you'll notice it's actually not part of the header. The circular image is set with a class of .main-bg on the body tag. And the image is the background-image for the class .main-bg. – Michael H Nov 17 '16 at 0:15
2

Probably the best approach is to play around with Clippy which will help you with the shape you are looking for and neatly output the CSS for you.

Then it's just a case of tweaking and integrating into your design. I've pulled together an example in Codepen that should help. Here is the essential CSS:

-webkit-clip-path: ellipse(60% 80% at 50% 0%);
clip-path: ellipse(50% 17% at 50% 0%);

Enjoy tinkering :)

Credit to Lea Verou for the herringbone pattern.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.