El fondo de onda se puede generar fácilmente usando antes del selector. Usaremos una imagen de onda de formato de archivo .png que puede crear por su cuenta o puede descargar desde aquí .
Código HTML: En esta sección, diseñaremos la estructura básica del código.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title> How to Create Wave Background using CSS ? </title> </head> <body> <section class="pattern"> <div class="geeks"> <h1>GEEKS FOR GEEKS</h1> </div> </section> </body> </html>
Código CSS: en esta sección, usaremos algunas propiedades CSS para diseñar el fondo de la ola. Primero agregaremos un fondo básico a la sección y luego usaremos el selector anterior para configurar el archivo png de onda encima de nuestro fondo.
CSS
<style>
body {
padding: 0%;
margin: 0%;
}
.geeks {
padding: 200px;
text-align: center;
}
section {
width: 100%;
min-height: 500px;
}
.pattern {
position: relative;
background-color: #3bb78f;
background-image: linear-gradient(315deg,
#3bb78f 0%, #0bab64 74%);
}
.pattern:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 215px;
background: url(wave.png);
background-size: cover;
background-repeat: no-repeat;
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
How to Create Wave Background using CSS ?
</title>
<style>
body {
padding: 0%;
margin: 0%;
}
.geeks {
padding: 200px;
text-align: center;
}
section {
width: 100%;
min-height: 300px;
}
.pattern {
position: relative;
background-color: #3bb78f;
background-image: linear-gradient(315deg,
#3bb78f 0%, #0bab64 74%);
}
.pattern:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 250px;
background: url(
https://media.geeksforgeeks.org/wp-content/uploads/20200326181026/wave3.png);
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<section class="pattern">
<div class="geeks">
<h1>GEEKS FOR GEEKS</h1>
</div>
</section>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA