¿Diseños de sitios web con encabezados redondos?

¿Alguien tiene algún ejemplo de sitios web en vivo con encabezados redondos? Similar a esto: http://www.nasty-creatures.com/

Estoy trabajando en algo para un cliente y se me ocurrió un diseño con un encabezado redondo, sin embargo, necesito algunos ejemplos diferentes de sitios en vivo para poder ver cómo están construidos. He buscado en la web y no puedo encontrar ningún ejemplo decente.

Si alguien puede guiarme en la dirección correcta, ¡lo agradecería mucho!

Ese encabezado es rectangular (donde está el menú). La imagen debajo es circular, pero eso no es un encabezado. No puedo pensar en ningún sitio con un encabezado redondo
No tengo idea de lo que aparecerá, pero intente fijarlo en Pinterest y luego vuelva a mirarlo desde otra cuenta o un navegador diferente para ver si encuentran alguna recomendación de diseños similares con sus algoritmos. Esto puede tomar algunos días para que su sistema absorba la imagen si es nueva para ellos.
Si inspecciona el sitio, notará que en realidad no es parte del encabezado. La imagen circular se establece con una clase de .main-bg en la etiqueta del cuerpo. Y la imagen es la imagen de fondo de la clase .main-bg.

Respuestas (1)

Probablemente, el mejor enfoque es jugar con Clippy , que lo ayudará con la forma que está buscando y generará el CSS de manera ordenada para usted.

Entonces es solo un caso de ajustar e integrar en su diseño. Reuní un ejemplo en Codepen que debería ayudar. Aquí está el CSS esencial:

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

Disfruta jugando :)

Crédito a Lea Verou por el patrón de espiga.

¿Diseños de sitios web con encabezados redondos?
RespuestasAquíPolítica de privacidad1y, 0v