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

Loader espiral con CSS

Loader espiral con CSS

MixitUp 3: animaciones y manipulación del DOM

MixitUp 3: animaciones y manipulación del DOM

3D Box Control conTweenMax

3D Box Control conTweenMax

Algunos artículos que te pueden interesar

¿Cómo hacer rotaciones con CSS3?

¿Cómo hacer rotaciones con CSS3?

En esta entrada veremos como realizar rotaciones sobre cualquier elementos HTML empleando la propiedad transform de CSS3.

Andrés Cruz 07-08-2014

Efecto de texto neon con solo CSS

Efecto de texto neon con solo CSS

Se explica cómo crear un sencillo efecto neón con CSS empleando la propiedad text-shadow.

Andrés Cruz 08-09-2017

Múltiples fondos animados con CSS

Múltiples fondos animados con CSS

En este artículo explicaremos en base a un ejemplo cómo crear múltiples fondos anidados animándolos con un poco de CSS3.

Andrés Cruz 06-01-2014