En los diseños web modernos, el fondo personalizado se ha convertido en un diseño popular para el fondo del banner. Un fondo personalizado tiene infinidad de diseños. El diseño se basa puramente en la imaginación y la creatividad. Algunos ejemplos comunes de fondos personalizados incluyen fondo ondulado, fondo sesgado, etc.
Este artículo mostrará el enfoque utilizado para crear el fondo Sawblade, ya que su parte inferior se asemeja a la de una sierra. También se conoce como patrón en zig-zag.
Enfoque: el enfoque consiste en crear primero una string de pequeños triángulos en la parte inferior y luego rotarlos a lo largo del eje X para que formen la apariencia de una cuchilla.
Código HTML: en la sección HTML, se crea el elemento <div> que se utilizará para contener el patrón.
HTML
<html lang="en"> <head> <title> Custom background </title> </head> <body> <div class="geeks"> </div> </body> </html>
Código CSS: El CSS se puede definir siguiendo los siguientes pasos:
- Paso 1: Proporcione un color de fondo básico al cuerpo.
- Paso 2: Alinee el div creado al centro con un color de fondo diferente de su elección.
- Paso 3: Usando el selector anterior, cree una pequeña string de triángulos usando la propiedad de gradiente lineal con el mismo grado pero manteniendo uno de ellos como negativo.
- Paso 4: use la función de rotate() para rotar los triángulos en el eje X.
CSS
<style>
body {
background: green;
}
.geeks {
position: absolute;
top: 50%;
width: 100%;
height: 50%;
background: white;
}
.geeks::before {
content: "";
position: absolute;
width: 100%;
height: 15px;
display: block;
background: linear-gradient(
-45deg, transparent, 33.33%,
green 33.33%, green 66.66%,
transparent 66.66%),
linear-gradient(45deg, transparent,
33.33%,green 33.33%, green 66.66%,
transparent 66.66%);
background-size: 30px 60px;
transform: rotateX(180deg);
}
</style>
Código completo: en esta sección, combinaremos las dos secciones anteriores para crear el fondo del banner personalizado usando HTML y CSS.
HTML
<html lang="en">
<head>
<title>
Custom background
</title>
<style>
body {
background: green;
}
.geeks {
position: absolute;
top: 50%;
width: 100%;
height: 50%;
background: white;
}
.geeks::before {
content: "";
position: absolute;
width: 100%;
height: 15px;
display: block;
background: linear-gradient(
-45deg, transparent, 33.33%,
green 33.33%, green 66.66%,
transparent 66.66%),
linear-gradient(45deg, transparent,
33.33%,green 33.33%, green 66.66%,
transparent 66.66%);
background-size: 30px 60px;
transform: rotateX(180deg);
}
</style>
</head>
<body>
<div class="geeks">
</div>
</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