Bloguero-ec

Codigo Fuente, programación, Diseño Web

Creando Triangulos con Css.

marzo 20, 2017
codigo-fuente,css,css3,html5


Etiquetas: , , ,


Cualquiera que haya tratado de hacer flechas  HTML, globos de texto u otros elementos puntiagudos, sabe que creando triángulo con CSS tiene que utilizar algún tipo de truco. Las dos soluciones más populares para crear triángulos son :

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
// y lo mostramos en una capa
<div id="triangle-up"></div>

, o para utilizar Caracteres Unicode  .

U+25B2  //Triangulo negro UP
U+25BC  //Triangulo negro DOWN
// y asi utilizando todos los simbolos Unicode Html

Hay que reconocer que estos dos tipos CSS son muy inteligente pero siguen siendo terribles soluciones, y como tal, hacen que nuestro código sea mucho más feo y menos flexible. Por ejemplo, no podemos tener un triángulo con una imagen de fondo, ya que los bordes y los caracteres sólo pueden ser de un solo color.

Utilizando Clip-path

Clip-path es una nueva adición a la especificación CSS , que nos permite solo mostrar la parte de un elemento y ocultar el resto, que es lo que realmente queremos.

Supongamos que tenemos un rectángulo ordinario en un elemento <div> veamos el resultado.

See the Pen MpQBjv by bloguero ecuador (@bloguero) on CodePen.

Para hacer un triangulo necesitamos de la función polygon() tenemos como argumento separados por comas formar el objeto en forma de triángulo, Un triangulo = 3 puntos.

See the Pen NpyByd by bloguero ecuador (@bloguero) on CodePen.


Cada cosa permanece en la ruta creada, lo que está fuera de la ruta permanece oculta. De esta manera podemos no solo hacer triángulos, sino todo tipo de formas asimétricas que se comportan como bloques CSS regulares.

El único inconveniente de esta técnica es que tenemos que calcular cuidadosamente las coordenadas de los puntos con el fin de obtener un triángulo en buen estado.

Aún así, es mucho mejor que el uso de los bordes o ▲.
Soportes para Navegadores

Si abres caniuse puede no verse bien a primera vista, pero en realidad la propiedad funciona perfectamente . Los usuarios de Firefox tienen que esperar hasta la versión 53.

Mas Publicaciones

Siguenos




Conviertase en Editor

Te gustaría ser editor en Bloguero-ec.? Escribe tutoriales referente a programación, diseño web, CSS, entre otros y deja tu marca personal en nuestro sitio, contáctanos y empieza a editar Ya..

Compartir..!

© Copyright 2017 Bloguero-ec - Derechos Reservados

A %d blogueros les gusta esto: