JMiur [E]

Un cuadrado, dividido en cuatro partes
<div style="border-bottom: 50px solid lightblue; border-left: 50px solid red; border-right: 50px solid green; border-top: 50px solid yellow; height: 0;width: 0;"> </div>
Un triángulo.
<div style="border-bottom: 50px solid yellow; border-left: 30px solid #101921; border-right: 30px solid #101921; margin-bottom: 30px; width: 0;"> </div>
Un moño
<div style="border: 30px solid salmon; border-bottom: 15px solid #101921; border-top: 15px solid #101921; height: 0; width: 0;"> </div>

Una flecha.
Hacia allá
<style>
.right_arrow {position: relative; height: 50px; width: 250px;}
.right_arrow .body {background-color: SteelBlue; color:#FFF; line-height: 50px; text-align: center; height: 50px; width:100px;}
.right_arrow .arrow {border: 25px solid #101921; border-left: 10px solid SteelBlue; position:absolute; left:100px; top: 0; height: 0;}
</style>

<div class="right_arrow"><div class="body"> ... texto ... </div><div class="arrow"></div></div>
Y otra flecha.
Hacia el otro lado
<style>
.left_arrow {position: relative;}
.left_arrow .arrow {border: 25px solid #101921; border-right: 25px solid #CC0000; margin-left: -25px; overflow: hidden; width:0; height:0;}
.left_arrow .body {background-color: #CC0000; color: white; margin: -35px 0 0 25px; left:25px; text-align: center; top:15px; height:20px;}
</style>

<div class="left_arrow"><div class="arrow"></div><div class="body"> ... texto ... </div></div>

REFERENCIAS:Cult-f.net

11 comentarios:

alexandre  

Para redondear las esquinas. ¿Conoces alguna información?

Responder
Jaime Trujillo Escobedo  

Vagabundia, muy buen post, me gustó bastante el de la flecha, es muy interesante todo lo que se puede hacer con css :-D

Responder
Graciela  

jijiji se nota que has estado mirando revistas infantiles jijiji...mira lo que podemos hacer :P...besitos!!!

Responder
Anahí  

JMiur, sólo para saludarlo y desearle un buen día del laburante.

Responder
Analia Alvado  

Todo Perfecto, menos la flecha celeste, en esa sólo sale el texto sin el fondo… ¿qué me falta? ¿qué no hago?

Salu2

Responder
JMiur  

alexandre: Para curvas, fíjate en estas entradas: 1, 2, 3Jaime: Sí. Es interesante :D

Graciela: Pués me he divertido con eso :$

Anahí: Te deseo lo mismo. Olvidemos al mundo hasta el lunes :D

Analía: Debería ver el ejemplo para decirte donde está el problema.

Responder
Raúl  

Hola que tal JM. tengo una duda veras tengo un blog alojado en un dominio propio midominio.com. No quiero que google me busque ni indexe mis entradas voy a poner lo de robots.txt. Mi duda radica en que lo debo poner hacia midominio.com o hacia la direccion de mi blogspot??? salu2

Responder
Bonzu Pipinpadaloxicopolis III  

Dan la impreción de ser imágenes. Muy bueno ;)

Responder
JMiur  

Raul: no se mucho de ese tema, imagino que la restricción debe indicarse para el dominio propio aunque si uno redirige al otro y no quieres que ninguno de ellos sea indexado, debría incluir ambos. Tambiñen puedes hacerlo con META:
<meta name='robots' content='noindex,nofollow' />
o en el caso de Blogger, indicándolo en la Configuración.

Responder
Analia Alvado  

Hola, aquí te pego la dirección del blog donde probé las Curiosidades con CSS

http://martesgarabato.blogspot.com/2009/05/hacia-alla.html

la flecha celeste “HACIA ALLÁ” es la que no sale…

Perdón por la demora, me pierdo dentro de mi PC y fuera de ella también. Ah, tampoco pude abrir el formulario de contacto ni enviarte un e-mail, me siento discriminada, jejej

Buen finde…

Responder
JMiur  

Analía:
Lo que no veo en la prueba, ni siquiera en el código fuente, son las definiciones de estilo de right_arrow. Veo las de left_arrow que es la otra pero no la primera.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR