Este tipo de fondo crea singularidad en su página web al evitar un fondo o encabezado de tamaño rectangular regular. El siguiente diseño de encabezado mostrará su creatividad. Este diseño se puede lograr de dos maneras:
Ejemplo: Este ejemplo usa ::before y ::after selector en un elemento div para crear una imagen de onda para el fondo.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to Create a Wave Image
for a Background using CSS?
</title>
<style>
.wave {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 70px;
width: 100%;
background: dodgerblue;
z-index: -1;
}
.wave::before {
content: "";
display: block;
position: absolute;
border-radius: 100% 90%;
width: 51%;
height: 75px;
background-color: white;
right: 0px;
top: 35px;
}
.wave::after {
content: "";
display: block;
position: absolute;
border-radius: 100% 90%;
width: 51%;
height: 75px;
background-color: dodgerblue;
left: -8px;
top: 25px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:forestgreen;">
Geeks For Geeks
</h1>
<div class="wave"></div>
</body>
</html>
Producción:
El problema de usar before y after es que tenemos que definir su posición en píxeles, por lo que a medida que cambia la altura de la pantalla, cambia su forma y no es tan adecuada como parece. Entonces, para ese propósito usamos SVG en CSS.
Ejemplo: este ejemplo usa SVG para diseñar una imagen de onda para el fondo.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to Create a Wave Image
for a Background using CSS?
</title>
<style>
svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.container {
display: inline-block;
position: absolute;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
top: 0;
left: 0;
}
body {
overflow: hidden;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:lawngreen;">
Geeks For Geeks
</h1>
<div class="container">
<!-- Creating a SVG image -->
<svg viewBox="0 0 500 500"
preserveAspectRatio="xMinYMin meet">
<path d="M0, 100 C150, 200 350,
0 500, 100 L500, 00 L0, 0 Z"
style="stroke:none; fill:dodgerblue;">
</path>
</svg>
</div>
</body>
</html>
Producción:
Ejemplo: este ejemplo usa SVG para diseñar una imagen de onda para el fondo.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to Create a Wave Image
for a Background using CSS?
</title>
<style>
svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.container {
display: inline-block;
position: absolute;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
top: 0;
left: 0;
}
body {
overflow: hidden;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:white;">
Geeks For Geeks
</h1>
<div class="container">
<svg viewBox="0 0 500 500"
preserveAspectRatio="xMinYMin meet"
style="z-index: -2;">
<path d="M0, 100 C150, 200 350,
0 500, 100 L500, 00 L0, 0 Z"
style="stroke: none;
fill:rgba(30, 144, 225, 0.5);">
</path>
</svg>
</div>
<div class="container">
<svg viewBox="0 0 500 500"
preserveAspectRatio="xMinYMin meet"
style="z-index:-1;">
<path d="M0, 80 C300, 0 400,
300 500, 50 L500, 00 L0, 0 Z"
style="stroke: none;
fill:rgba(153, 50, 204, 0.5);">
</path>
</svg>
</div>
<div class="container">
<svg viewBox="0 0 500 500"
preserveAspectRatio="xMinYMin meet"
style="z-index:-3;">
<path d="M0, 100 C150, 300 350,
0 500, 100 L500, 00 L0, 0 Z"
style="stroke: none;
fill:rgba(220, 20, 60, 0.5);">
</path>
</svg>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA