Дизайн веб-сайтов с круглыми заголовками?

У кого-нибудь есть примеры живых сайтов с круглыми заголовками? Похоже на это: http://www.nasty-creatures.com/

Я работаю над чем-то для клиента и придумал дизайн с круглым заголовком, однако мне нужны разные примеры живых сайтов, чтобы я мог видеть, как они построены. Я облазил интернет и не нашел достойных примеров.

Если кто-то может направить меня в правильном направлении, я был бы очень признателен!

Этот заголовок прямоугольный (там, где находится меню). Изображение под ним круглое, но это не заголовок. Я не могу вспомнить ни одного сайта с круглым заголовком
Я понятия не имею, что это получится, но попробуйте закрепить это на Pinterest, а затем вернуться, чтобы просмотреть его из другой учетной записи или другого браузера, чтобы узнать, найдут ли они какие-либо рекомендации похожих макетов с их алгоритмами. Это может занять несколько дней, пока их система усвоит изображение, если оно для них новое.
Если вы осмотрите сайт, вы заметите, что на самом деле это не часть заголовка. Круглое изображение задается классом .main-bg в теге body. И изображение является фоновым изображением для класса .main-bg.

Ответы (1)

Вероятно, лучший подход — поиграть с Clippy , который поможет вам с формой, которую вы ищете, и аккуратно выведет CSS для вас.

Тогда это просто случай настройки и интеграции в ваш дизайн. Я собрал пример в Codepen , который должен помочь. Вот основной CSS:

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

Наслаждайтесь мастерством :)

Спасибо Леа Веру за узор «елочка».

Дизайн веб-сайтов с круглыми заголовками?
СпросиСетьПолитика конфиденциальности1y, 0v