El patrón de diseño de fondo sesgado se utiliza como banner en la página principal de un sitio web. Le da al sitio web un aspecto más natural y agradable. El fondo sesgado se puede crear fácilmente usando CSS antes y después de los selectores y usando la función de sesgo .
Enfoque: El enfoque es simple. Usaremos una función de sesgo con selector de antes y después para convertir nuestra línea de borde en un plano 2-D. La parte del lado izquierdo se hará usando el selector antes y la parte del lado derecho se hará usando el selector después. También puede cambiar el orden haciendo un lado izquierdo usando el selector posterior y el lado derecho usando el selector anterior.
Código HTML: El código HTML se utiliza para diseñar la estructura básica de la página web. El siguiente código contiene dos elementos <section> con el atributo id.
<!DOCTYPE html> <html lang="en"> <head> <title>Skewed Background</title> </head> <body> <section id="geeks1"> <h1>GeeksforGeeks</h1> </section> <section id="geeks2"></section> </body> </html>
Código CSS:
- Paso 1: Primero, proporcione un fondo a ambas secciones y configure el ancho al 100% y la altura se puede configurar según sea necesario.
- Paso 2: ahora, use el selector anterior en la sección inferior y disminuya su ancho al 50%, ya que queremos que nuestro borde esté sesgado desde el centro. La altura se puede configurar según el requisito. Luego use la función de sesgo para transformarlo en un plano 2-D en un ángulo particular.
- Paso 3: repita el paso 2 y cambie de izquierda a derecha y niegue el grado de asimetría.
El siguiente código mostrará la implementación de los pasos anteriores.
Sugerencia: puede elegir su grado de sesgo utilizando la función de inspección y ajustando el grado para obtener el ángulo perfecto.
<style>
#geeks1 {
width: 100%;
height: 400px;
position: relative;
background: rgb(58, 238, 58);
}
h1 {
text-align: center;
padding: 200px;
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue",
sans-serif;
color: white;
font-size: 40px;
}
#geeks2 {
width: 100%;
height: 400px;
position: relative;
background: rgb(2, 94, 25);
}
#geeks2::before {
content: "";
width: 50%;
height: 100px;
position: absolute;
top: -48px;
left: 0;
background: rgb(2, 94, 25);
transform: skewY(8deg);
}
#geeks2::after {
content: "";
width: 50%;
height: 100px;
position: absolute;
top: -48px;
right: 0;
background: rgb(2, 94, 25);
transform: skewY(-8deg);
}
</style>
Código completo: es la combinación de las dos secciones anteriores para crear un fondo sesgado.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Skewed Background</title>
<style>
#geeks1 {
width: 100%;
height: 400px;
position: relative;
background: rgb(58, 238, 58);
}
h1 {
text-align: center;
padding: 200px;
font-family: -apple-system,
BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue",
sans-serif;
color: white;
font-size: 40px;
}
#geeks2 {
width: 100%;
height: 400px;
position: relative;
background: rgb(2, 94, 25);
}
#geeks2::before {
content: "";
width: 50%;
height: 100px;
position: absolute;
top: -48px;
left: 0;
background: rgb(2, 94, 25);
transform: skewY(8deg);
}
#geeks2::after {
content: "";
width: 50%;
height: 100px;
position: absolute;
top: -48px;
right: 0;
background: rgb(2, 94, 25);
transform: skewY(-8deg);
}
</style>
</head>
<body>
<section id="geeks1">
<h1>GeeksforGeeks</h1>
</section>
<section id="geeks2"></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