Las flechas son ampliamente utilizadas en los sitios web modernos. Se utilizan principalmente para deslizar imágenes y cambiar de página. Aunque hay muchos iconos disponibles para estas flechas. A veces es necesario diseñar una imagen personalizada según el requisito del cliente. Crear flechas usando CSS tiene muchos beneficios, como que no afectan el tiempo de carga de la página, también es muy beneficioso para el SEO al proporcionar un toque personalizado al sitio web.
Enfoque: Crear una flecha usando CSS es muy simple. Primero, cree una forma de L (alfabeto) usando alguna propiedad de sombra de caja y luego gírela en algún ángulo para alinearlas (las flechas izquierda y derecha) juntas.
Código HTML: en esta sección se crean dos elementos div , uno para cada flecha.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Arrow</title> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html>
Código CSS:
- Paso 1: Primero use la propiedad box-shadow para hacer que el elemento div tenga forma de L.
- Paso 2: ahora gírelos a ambos en ángulos de 45 grados y -135 grados para alinearlos justo uno frente al otro.
Nota: puede usar otros valores para la flecha derecha, como 225 grados. Puede encontrar el valor perfecto de def usando la consola de desarrolladores. También puede agregar efectos de desplazamiento según el requisito.
<style>
body {
padding: 280px 0 0 500px;
background: green;
}
.left,
.right {
width: 100px;
height: 100px;
transition: .5s;
float: left;
box-shadow: -2px 2px 0 black;
}
.left {
transform: rotate(45deg);
}
.right {
transform: rotate(-135deg);
}
</style>
Código Completo: Es la combinación de las dos secciones de códigos anteriores.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Arrow</title>
<style>
body {
padding: 280px 0 0 500px;
background: green;
}
.left,
.right {
width: 100px;
height: 100px;
transition: .5s;
float: left;
box-shadow: -2px 2px 0 black;
}
.left {
transform: rotate(45deg);
}
.right {
transform: rotate(-135deg);
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></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