¡¡Un bonito cuadro en CSS!! La verdad estaba aburrido y la imaginación voló, recordé algunos recursos que había visto en el pasado y bueno... esto fue lo que salió. El cuadro de abajo no contiene una sola imagen.
Esto no tiene un uso práctico... o al menos, eso creo. Simplemente estaba aburrido y lo pongo aquí como curiosidad. Quiza podría hacerse un menú con esto o algo así. Por cierto, la cosa se ve rara en Opera 9 (la he probado en Firefox 2, IE7, IE6 y Opera 9. Este último es el único que tiene algunos problemas; supngo que por la forma en que representa el texto en ems [en pixeles tiene un límite de 500px, y pt era demasiado diferente en los navegadores como para ser usable]).
¡¡Pero miren que bonito dibujo!! ¡Vamos a guardarlo! Pero... ¡momento! ¿Y la imagen? ¡OH POR DIOS! ¡NO ES UNA IMAGEN!
Así es. Lo que ven abajo está compuesto por puros divs y spans. Ni una sola imagen ha sido usada. Bonito ¿Cierto? Echenle un vistaso al código fuente. Quiza alguien en algún lugar le encontrará un uso. :P
Pintar en CSS es complicado, fastidioso, confuso, toma mucho tiempo y ni siquiera se ve bien. Entonces ¿Por qué lo hice? ¡Porque se puede! Además, creo que no me quedó tan feo... ¿O si?
Como todo CSS, este no es perfecto. Utiliza el atributo "transparent" para darle color a algunos bordes, lo cual no es soportado por IE6- y otros navegadores viejos. Por este motivo, he escondido algunos elementos. Opera también lo muestra medio extraño, debido a la manera en que maneja las fuentes y sus tamaños. Firefox e IE7 funcionan perfectamente.
También, por algunos errores en IE7 al momento de mostrar cajas con bordes inclinados, he tenido que agregar algunos elementos extras para esconder algunos errores; así como utilizar comentarios condicionales para modificar el posicionamiento de algunos elementos.