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!

Improve this question
3
  • 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
    Commented Nov 16, 2016 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
    Commented Nov 16, 2016 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
    Commented Nov 17, 2016 at 0:15

1 Answer 1

Reset to default
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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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