Dibujar una flecha con una div

patilanz · #1 (**permalink**) 19/09/2012, 06:50

Hola, se puede dibujar una flecha con una div ?? Usando recortes o estilos css??
O si se puede otra figura??

Un saludo

pzin · #2 (**permalink**) 19/09/2012, 08:27

Si le echas ganas y paciencia te sale hasta un Homer.

patilanz · #3 (**permalink**) 19/09/2012, 11:37

Cita:

Iniciado por Bonez

Si le echas ganas y paciencia te sale hasta un [URL="http://www.romancortes.com/blog/homer-css/"]Homer[/URL].

Gracias por tu respuestas pero como se hacen las curvas y los circulos porque lo que yo se los divs son solo cuadrados...

Un saludo

noruas · #4 (**permalink**) 19/09/2012, 12:34

Se hacen con letras, jungando con el color, posicion, tamaño estilo etc... Al menos el de homer ese xD

pzin · #5 (**permalink**) 19/09/2012, 13:32

Para hacer un círculo puedes usar la propiedad border-radius de CSS3:

Código CSS:

Ver original#algunElemento {
    width: 200px;
    height: 200px;
    background: firebrick;   
    border-radius: 50%; 
}

Pero dibujar una flecha por dibujarla con CSS, yo personalmente lo veo complicarse la vida. Como experimento está bien, pero para algo que se use no sé yo...

patilanz · #6 (**permalink**) 19/09/2012, 14:57

Cita:

Iniciado por Bonez

Para hacer un círculo puedes usar la propiedad border-radius de CSS3:

Código CSS:

Ver original#algunElemento {
    width: 200px;
    height: 200px;
    background: firebrick;   
    border-radius: 50%; 
}

Pero dibujar una flecha por dibujarla con CSS, yo personalmente lo veo complicarse la vida. Como experimento está bien, pero para algo que se use no sé yo...

Esque lo necesito para poder cambiar el color de la flecha poco a poco con transition porque si uso una imagen se cambia de repente y eso no me gusta...

Un saludo :)

noruas · #7 (**permalink**) 19/09/2012, 15:38

¿Y no te seria mas facil usar alguna fuente de texto de las que son figuras en vez de letras? Con eso podrias hacer lo que buscas del cambio de color. Hay muchas fuentes así, el propio windows trae varias.

Aquí tienes una, otra aquí y esta última la que tiene la flecha mas clásica. Pero vamos hay muchas más...

patilanz · #8 (**permalink**) 19/09/2012, 16:24

Cita:

Iniciado por noruas

¿Y no te seria mas facil usar alguna fuente de texto de las que son figuras en vez de letras? Con eso podrias hacer lo que buscas del cambio de color. Hay muchas fuentes así, el propio windows trae varias.

[URL="http://www.dafont.com/arrows.font"]Aquí[/URL] tienes una, otra [URL="http://www.dafont.com/pointers.font"]aquí[/URL] y [URL="http://www.dafont.com/fnt-basicshapes1.font"]esta[/URL] última la que tiene la flecha mas clásica. Pero vamos hay muchas más...

Lol no sabia que se pueden usar en la web... Y si se puede como se usan ?

Un saludo

flashmax · #9 (**permalink**) 19/09/2012, 17:01

Hola estuve experimentado y logre esto:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
.triangle{
 border-color: #f00 transparent transparent transparent;
 border-style: solid;
 border-width: 50px;
 height:0;
 width:0;
 top:100px;
 position:absolute;
 z-index:1;
}
.rectangulo{
background-color: #F00;
height:100px;
width:30px;
position:absolute;
left:43px;
}
</style>
</head>

<body><div id="flecha">
<div class="rectangulo"></div>
<div class="triangle"></div>
</div>
</body>
</html>

patilanz · #10 (**permalink**) 19/09/2012, 18:30

Cita:

Iniciado por flashmax

Hola estuve experimentado y logre esto:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
.triangle{
 border-color: #f00 transparent transparent transparent;
 border-style: solid;
 border-width: 50px;
 height:0;
 width:0;
 top:100px;
 position:absolute;
 z-index:1;
}
.rectangulo{
background-color: #F00;
height:100px;
width:30px;
position:absolute;
left:43px;
}
</style>
</head>

<body><div id="flecha">
<div class="rectangulo"></div>
<div class="triangle"></div>
</div>
</body>
</html>

Lol! La verdad te salio muy bien pero se podia hacer que mira a la izquierda y la derecha?

Gracias :)

flashmax · #11 (**permalink**) 19/09/2012, 19:29

Cita:

Iniciado por patilanz

Lol! La verdad te salio muy bien pero se podia hacer que mira a la izquierda y la derecha?

Gracias :)

si cambia el orden del color en .triangle{
border-color: #f00 transparent transparent transparent;

patilanz · #12 (**permalink**) 20/09/2012, 02:04

Cita:

Iniciado por flashmax

si cambia el orden del color en .triangle{
border-color: #f00 transparent transparent transparent;

Muchas gracias ahora si me funciona perfecto

furoya · #13 (**permalink**) 23/09/2012, 13:57

Hola todos.

patilanz : no sé qué decirte. (Después acá me echan por maltratar a la gente.)

Botones tipicos con cabeza de flecha (elementos con forma de triángulo)

Webdings, ¿sólo para Explorer? (caracteres con flechas unicode)

Tablas con flechas. (más ejemplos con caracteres)

reloj digital en javascript ke funcione en mozilla #18 ("cambio color" gradiente en imagen)

reloj digital en javascript ke funcione en mozilla #19 (otra versión del anterior)

Intentando hacer triángulos en CSS (triangulito tipo 'field' en CSS)

Animación amorfa en div. (otras formas en CSS)

@Furoya ¿querías espirales en css? (más formas en CSS)