Morton 19 de agosto de 2013 a las 14.07
   Imprimir artículo
elWebmaster.com

Cómo crear triángulos en CSS


css3wide1CSS puede ser muy eficiente para realizar algunas tareas de dise√Īo en tu sitio web con formas y figuras. Con este truco creado por el desarrollador de MooTools Core, Darren Waddell, usaremos s√≥lo CSS para crear tri√°ngulos compatibles en todos los navegadores.

Ver demostración >>

El código necesario es el siguiente:

  1. /* crea una flecha que apunta hacia arriba */
  2. div.arrow-up {
  3.     width: 0;
  4.     height: 0;
  5.     border-left: 5px solid transparent;  /* left arrow slant */
  6.     border-right: 5px solid transparent; /* right arrow slant */
  7.     border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
  8.     font-size: 0;
  9.     line-height: 0;
  10. }
  11.  
  12. /* crea una flecha que apunta hacia abajo */
  13. div.arrow-down {
  14.     width: 0;
  15.     height: 0;
  16.     border-left: 5px solid transparent;
  17.     border-right: 5px solid transparent;
  18.     border-top: 5px solid #2f2f2f;
  19.     font-size: 0;
  20.     line-height: 0;
  21. }
  22.  
  23. /* crea una flecha que apunta a la izquierda */
  24. div.arrow-left {
  25.     width: 0;
  26.     height: 0;
  27.     border-bottom: 5px solid transparent;  /* left arrow slant */
  28.     border-top: 5px solid transparent; /* right arrow slant */
  29.     border-right: 5px solid #2f2f2f; /* bottom, add background color here */
  30.     font-size: 0;
  31.     line-height: 0;
  32. }
  33.  
  34. /* crea una flecha que apunta hacia la derecha
  35. div.arrow-right {
  36.     width: 0;
  37.     height: 0;
  38.     border-bottom: 5px solid transparent;  /* left arrow slant */
  39.     border-top: 5px solid transparent; /* right arrow slant */
  40.     border-left: 5px solid #2f2f2f; /* bottom, add background color here */
  41.     font-size: 0;
  42.     line-height: 0;
  43. }

El secreto para estos tri√°ngulos es crear bordes gigantes a los dos lados perpendiculares en la direcci√≥n en que la deseas que el tri√°ngulo apunte. Haz que el borde del lado opuesto sea del mismo tama√Īo que el fondo de color de cualquier colo que quieras que sea. M√°s largo el borde, m√°s largo el tri√°ngulo. Puedes colorear los tri√°ngulos de cualquier color, cualquier tama√Īo y cualquier direcci√≥n.

Tri√°ngulos CSS con :before: y :after:

Los ejemplos CSS usaban elementos verdaderos, pero ¬ŅQu√© sucede si no quieres agregar tri√°ngulos simples? Bueno, puedes crearlos con seudo-elementos; este es el caso perfecto para los tooltips.

  1. div.tooltip {
  2.     /* tooltip content styling in here; nothing to do with arrows */
  3. }
  4.  
  5. /* shared with before and after */
  6. div.tooltip:before, div.tooltip:after {
  7.     content: ' ';
  8.     height: 0;
  9.     position: absolute;
  10.     width: 0;
  11.     border: 10px solid transparent; /* arrow size */
  12. }
  13.  
  14. /* these arrows will point up */
  15.  
  16. /* top-stacked, smaller arrow */
  17. div.tooltip:before {
  18.     border-bottom-color: #fff;  /* arrow color */
  19.  
  20.     /* positioning */
  21.     position: absolute;
  22.     top: -19px;
  23.     left: 255px;
  24.     z-index: 2;
  25. }
  26.  
  27. /* arrow which acts as a background shadow */
  28. div.tooltip:after {
  29.     border-bottom-color: #333;  /* arrow color */
  30.  
  31.     /* positioning */
  32.     position: absolute;
  33.     top: -24px;
  34.     left: 255px;
  35.     z-index: 1;
  36. }

El lado del borde al que a√Īadir√°s el color es el lado opuesto de hacia adonde apunta la flecha. Necesitar√°s usar alguno de ambos, tanto el elemento :before como el :after. La segunda flecha podr√° usarse como una sombra de fondo o borde de fondo.

Ver demostración >>

¬°Esperamos que te sea de utilidad!

Fuente original del artículo: David Walsh Blog
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. frio industrial dice:

    Esto es ¬°incre√≠ble! No he le√≠do algo como esto desde hace mucho . Maravilloso hallar a alguien con algunas ideas propias sobre este tema. Este sitio web es algo que se necesita en Internet , alguien con un poco de dominio. Un trabajo √ļtil para traer algo nuevo a la red. Gracias de todos lo que te leemos.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder