DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
04-06-2015

Muchas cosas se pueden hacer con CSS; en DesarrolloLibre hemos visto varias de estas cosas al igual que en Internet o tu imaginación podrás encontrar una enorme cantidad de recursos y tutoriales;

¿A qué nos referimos cuando hablamos de flechas en los contenedores; bueno, una imagen vale más que mil palabras:

Flechas contenedores ejemplo HTML

Es una bifurcación que le colocamos a un contenedor; son ideales para menús emergentes o simplemente para dibujar globos -recuadros- de textos.

Y hablando de recursos, 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 y posición deseada con la propiedad border-width.

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;
            }

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Botón flotante

Botón flotante

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Algunos artículos que te pueden interesar

Comenzando con Adobe PhoneGap en Windows y Android

Comenzando con Adobe PhoneGap en Windows y Android

Se explica como instalar Adobe PhoneGap en Windows y Android además de crear un proyecto y configurarlo en la aplicación móvil.

Andrés Cruz 27-01-2017

Creando un input radio personalizado con solo CSS

Creando un input radio personalizado con solo CSS

Se explica cómo crear un input radio personalizado con solo CSS a través de un un indicador y animaciones y transiciones en CSS.

Andrés Cruz 23-05-2016

Múltiples columnas con CSS3

Múltiples columnas con CSS3

Con la propiedad Multi-column de CSS3 podemos dividir nuestro párrafos en columnas; utilizando algunos atributos.

Andrés Cruz 28-10-2013