En este artículo, vamos a crear un encabezado no rectangular utilizando los conceptos básicos de HTML y CSS .
Acercarse:
- Cree un encabezado usando la etiqueta <header> .
- Cree un div para agregar el contenido del encabezado.
- Use la función clip-path() para dar una forma particular al encabezado.
Código HTML:
- Cree un archivo HTML (index.html).
- Vincule el archivo CSS que proporciona todo el efecto de la animación en HTML. El archivo CSS está vinculado dentro de la sección principal de la página web.
- Llegando a la sección del cuerpo de nuestro código HTML.
- Cree una etiqueta de encabezado.
- Cree una etiqueta div y asígnele la clase.
- Agregue un encabezado y un párrafo a ese div en particular .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="main_box"> <h1>Geeks For Geeks</h1> <p>A computer science portal for geeks</p> </div> </header> </body> </html>
Código CSS: El siguiente código agregado dentro del archivo » style.css» y utilizado en el código HTML. CSS se utiliza para dar diferentes tipos de animaciones y efectos a la página HTML para que sea interactivo para todos los usuarios.
- Restaura todos los efectos del navegador.
- Utilice clases e identificadores para dar efectos a los elementos HTML.
- Use la función CSS clip-path() para dar una forma particular al encabezado.
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #000;
}
header{
height: 65vh;
background-color: rgb(37, 142, 8);
clip-path:
polygon(0 0, 100% 0, 100% 50vh,
80% 60vh, 60% 50vh, 40% 60vh,
20% 50vh, 0 60vh);
border-radius: 10em;
}
.main_box{
position: absolute;
top: 25%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
h1{
font-size: 3.85em;
margin: 0.25em;
}
p{
font-size: 2em;
}
Combina las dos secciones anteriores (HTML y CSS) de códigos y ejecútalo en el navegador.
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA