Muchas experimentos hemos vistos en DesarrolloLibre que se pueden hacer con CSS; en DesarrolloLibre hemos visto varios experimentos empleando selectores y propiedades para tener el efecto deseado.
¿A qué nos referimos cuando hablamos de flechas en los contenedores?; bueno, una imagen vale más que mil palabras:
Es una bifurcación que se coloca a un contenedor; son ideales para menús emergentes o simplemente para dibujar globos -recuadros- de textos que en sencillas palabras es colocar flechas en el contenedor con un poco de CSS; flechas para el lado derecho, izquierdo, abajo y arriba con un poquito de HTML y algo de CSS.
Nuevamente propiedad border-width y los selectores :before y :after
Para este pequeño truco CSS usaremos una propiedad ya tratada en la anterior entrada llamada Formas geométricas con CSS (parte 2); en el cual vimos a través de tres ejemplos la versatilidad de la propiedad border-width en conjunto con los selectores :before y :after.
El truco aquí al igual que en la entrada citada anteriormente, es emplear los selectores :before y/o :after para crear "otro contenedor" cerca del contenedor original y darle la forma -con la propiedad border-width- y posición deseada -con las propiedades left, bottom y top-.
Veamos en detalle cómo crear estas flechas en los contenedores.
Flecha en el contenedor arriba e izquierda
.arriba-izquierda:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-width: 0 25px 25px;
border-style: solid;
border-color: transparent transparent red;
}
Flecha en el contenedor arriba y derecha
.arriba-derecha:before {
content: "";
position: absolute;
top: -25px;
left: 50px;
width: 0;
height: 0;
border-width: 0 25px 25px;
border-style: solid;
border-color: transparent transparent red;
}
Flecha en el contenedor lado derecho y abajo
.lado-derecha-abajo:before {
content: "";
position: absolute;
top: 50px;
left: 100px;
width: 0;
height: 0;
border-width: 25px;
border-style: solid;
border-color: transparent transparent transparent red;
}
Flecha en el contenedor lado derecha y arriba
.lado-derecha-arriba:before {
content: "";
position: absolute;
top: 0;
left: 100px;
width: 0;
height: 0;
border-width: 25px;
border-style: solid;
border-color: transparent transparent transparent red;
}
Flecha en el contenedor izquierda y abajo
.lado-izquierda-abajo:before {
content: "";
position: absolute;
top: 50px;
left: -50px;
width: 0;
height: 0;
border-width: 25px;
border-style: solid;
border-color: transparent red transparent transparent;
}
Flecha en el contenedor abajo e izquierda
.abajo-izquierda:before {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-width: 25px 25px 0;
border-style: solid;
border-color: red transparent transparent;
}
Flecha en el contenedor abajo y derecha
.abajo-derecha:before {
content: "";
position: absolute;
bottom: -25px;
left: 50px;
width: 0;
height: 0;
border-width: 25px 25px 0;
border-style: solid;
border-color: red transparent transparent;
}
Si estudias un poco los CSS anteriores; te darás cuenta que lo único que varía es la posición en donde se ubica el contenedor con las propiedades top, bottom y left; además según la posición se define el lado al cual aplicarle el borde (border-width) y su color (border-color) y con esto le damos la forma deseada.
También podemos crear flechas sin los contenedores que sean un poco más atractivas, es decir más flechas y menos triángulos y usarlos individualmente en donde desees y parecen pequeños iconos en forma de flecha:
El HTML consta de dos bloques:
<div class="triangulo abajo"> <div></div> </div>
El CSS es el siguiente:
.triangulo {
border-style: solid;
border-width: 18px;
width: 0;
height: 0;
}
.triangulo>div {
border-style: solid;
border-width: 10px;
width: 0;
height: 0;
position:relative;
}
.triangulo.derecha{
border-color: transparent transparent transparent black;
}
.triangulo.derecha>div {
border-color: transparent transparent transparent white;
top:-10px;
left:-21px;
}
.triangulo.izquierda{
border-color: transparent black transparent transparent;
}
.triangulo.izquierda>div {
border-color: transparent white transparent transparent;
top:-10px;
left:1px;
}
.triangulo.arriba{
border-color: black transparent transparent transparent;
}
.triangulo.arriba>div {
border-color: white transparent transparent transparent;
top:-21px;
left:-10px;
}
.triangulo.abajo{
border-color: transparent transparent black transparent;
}
.triangulo.abajo>div {
border-color: transparent transparent white transparent;
top:1px;
left:-10px;
}
El funcionamiento es sencillo, como ves tenemos un contenedor padre que solo costa de borde, definido con el atributo border-width; luego para el div o contenedor interno del div con clase triangulo definimos otro border-width y aparte el color del borde, los cuales pueden ser cuatro; uno para cada lado, que también podemos emplear como uno para cada tipo de flecha (derecha, izquierda, arriba o abajo):
border-color: transparent black transparent transparent;
En el caso anterior solo definimos un color que en este caso es para la flecha izquierda; aunque podemos emplear más de un color por lado para hacer flechas más grandes; finalmente, para hacer ese pico en la cola característico de la flecha y de esta forma convertir un triángulo en flecha, con el contenedor interno a la clase triangulo, creamos otro contenedor más pequeño y lo posicionamos en el centro de la figura:
top: -10px; left: 1px;
Por supuesto, cada tipo de flecha tiene su variación y con esto varían algunos atributos así como sus valores; este último experimento o ejemplo fue tomado de esta web:
Código de CSS - Dibujar una flecha con html y css
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter