Intentando hacer triángulos en CSS

_cronos2 · #1 (**permalink**) 23/12/2011, 09:07

Buenas tardes amigos, resulta que estoy haciendo un form y en él hay un textarea (que imita a un input, es decir, sólo tiene una línea). Lo que quiero hacer es esto.
Entonces el textarea se quedaría debajo (en términos de profundidad) y por encima un submit para enviar el form, con la flecha hacia la izquierda. Estoy siguiendo, o eso creo, el "tutorial" que pusieron, pero no resulta

Ellos tienen una estructura diferente de la mía, yo tengo esto:

Código HTML:

Ver original<form id="logicarama" action="" method="POST">
    <textarea id="proposition" class="ninecol last" rows="1"></textarea>
    <input type="submit" id="generate" value="Generar" />
</form>

Así que la analogía sería h2 - form y a - #generate, y por tanto puse el CSS así:

Código CSS:

Ver originaltextarea#proposition {
            font:20px monospace;
            resize:none;
        }
        
        input#generate {
            position:relative;
            border-left:5px solid white;
            padding:0 10px;
            background:#A2D6EB;
            color:black;
        }
        
        form#logicarama {
            height:30px;
            padding:0 0 0 10px;
            line-height:2;
        }
        
        #generate:before,
        #generate:after {
            content: "";
            position: absolute;
            /* Pushed down half way, will get pulled back up half height of triangle
               ensures centering if font-size or line-height changes */
            top: 50%;
            width: 0;
            height: 0;
        }
        
        #generate:before {
            left: -12px;
            /* Triangle */
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid white;
            /* Pull-up */
            margin-top: -8px;
        }
        
        #generate:after {
            /* Smaller and different position triangle */
            left: -5px;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 6px solid #111;
            margin-top: -6px;
        }

Pero nada, se queda como un submit normal y el border-left de 5px blanco.
¿Qué estoy haciendo mal? He mirado en el CSS del ejemplo pero no veo nada que se me haya pasado

Espero que me puedan ayudar.
Saludos y gracias de antemano :D

emprear · #2 (**permalink**) 23/12/2011, 11:15

Te muestro que uso para crear flechas

Código HTML:

Ver original<!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>
<title>Flechas con css</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
/* estilos comunes */
.flecha-arriba,
.flecha-izquierda,
.flecha-derecha,
.flecha-abajo {
  border-style: dashed;
  border-color: transparent;
  border-width: 0.53em;
  display: -moz-inline-box;
  display: inline-block;
  /* manejas el tamaño de la fuente para el tamaño de las flechas */
  font-size: 50px;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: middle;
  width: 0;
}
 
/* bordes para las cuatro direcciones */
.flecha-arriba {
  border-bottom-width: 1em;
  border-bottom-style: solid;
  border-bottom-color: #005100;
  bottom: 0.25em;
}
.flecha-izquierda {
  border-right-width: 1em;
  border-right-style: solid;
  border-right-color: #005100;
  right: 0.25em;
}
.flecha-derecha {
  border-left-width: 1em;
  border-left-style: solid;
  border-left-color: #005100;
  left: 0.25em;
}
  .flecha-abajo {
  border-top-width: 1em;
  border-top-style: solid;
  border-top-color: #005100;
  top: 0.25em;
}
 
/* otro método, hay que aplicarlo sobre un elemento de bloque (div) */
.flecha-multi {
  border-color: red green blue orange;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}
 
.flecha-multi-derecha {
  border-color: transparent transparent transparent orange;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}
 
.flecha-multi-arriba {
  border-color: transparent transparent blue transparent;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}
 
 
input{
background-color: transparent;
color: transparent;
}
/*]]>*/
</style>
</head>
<body>
 
<div>
<p>Flechas</p>
<span class="flecha-arriba"><!-- flecha --></span>
<span class="flecha-izquierda"><!-- flecha --></span>
<span class="flecha-derecha"><!-- flecha --></span>
<span class="flecha-abajo"><!-- flecha --></span>
 
<p>Input</p>
<form action="x.php">
<p><input type="submit" value="." class="flecha-derecha" /></p>
</form>
 
</div>
 
<div>
<p>Otro método<br /></p>
 
<div class="flecha-multi"><!-- flecha --></div>
<br /><br />
<div class="flecha-multi-derecha"><!-- flecha --></div>
<br /><br />
<div class="flecha-multi-arriba"><!-- flecha --></div>
 
<p>Input</p>
<form action="x.php">
<p><input type="submit" value="." class="flecha-multi-derecha" /></p>
</form>
 
</div>
</body>
</html>

quizás te pueda orientar. No se bien cual es la idea del textarea que imite el input type text, y quizás pierda funcionalidad, pero aplicandole overflow:hidden; el scroll del textarea tambien desaparecería..
Saludos

kseso? · #3 (**permalink**) 23/12/2011, 14:40

Pruebe a pisar los estilos por defecto del input (declarándolos explícitamente). Borde: none; (antes de borde izquierdo) tamaño de letra, fuente, etc para que cambie la apariencia.

Sobre las flechas "a lo adobe" de Chis Coyier, creo que su fracaso podría estar en que el input no genere (visiblemente) los pseudoelementos. Al menos yo no he podido hacerlos aparecer en una prueba rápida que hice.
Quedé intrigado. A ver si con algo de suerte puedo buscar info sobre el particular (y hallarla).

_cronos2 · #4 (**permalink**) 24/12/2011, 14:13

Cita:

Iniciado por emprear

Te muestro que uso para crear flechas
[...]
quizás te pueda orientar. No se bien cual es la idea del textarea que imite el input type text, y quizás pierda funcionalidad, pero aplicandole overflow:hidden; el scroll del textarea tambien desaparecería..
Saludos

Lo del textarea en vez del input supongo que lo acabaré cambiando, fui reduciendo el número de líneas hasta una y luego no cambié a input text

Había pensado en que las flechas fueran divs aparte, pero me parece más limpia la solución de css-tricks porque lo hace todo con CSS. De todas maneras si no me queda otra lo haré así, gracias por el aporte anyway :3

Cita:

Iniciado por kseso?

Pruebe a pisar los estilos por defecto del input (declarándolos explícitamente). Borde: none; (antes de borde izquierdo) tamaño de letra, fuente, etc para que cambie la apariencia.

Sobre las flechas "a lo adobe" de Chis Coyier, creo que su fracaso podría estar en que el input no genere (visiblemente) los pseudoelementos. Al menos yo no he podido hacerlos aparecer en una prueba rápida que hice.
Quedé intrigado. A ver si con algo de suerte puedo buscar info sobre el particular (y hallarla).

OH SHIT, pues podría ser eso. Realmente no me importaría cambiar el input por un link, porque aunque es un submit en realidad no hay que enviar nada, simplemente se genera un código desde JS; pero no me parece muy semántico

De todas maneras voy a probar con un link en cuanto pueda, y si funciona y no me veo con ganas de romperme la cabeza lo dejaré así

Muchas gracias a los dos y feliz Navidad :D

IsaBelM · #5 (**permalink**) 24/12/2011, 14:38

te has planteado usar botón submit en lugar de input submit??

emprear · #6 (**permalink**) 24/12/2011, 14:50

@_cronos2

Cita:

Había pensado en que las flechas fueran divs aparte, pero me parece más limpia la solución de css-tricks porque lo hace todo con CSS

Pregunto?
Que parte de mi ejemplo usa algo más que CSS?
Por lo de usar divs?

Código CSS:

Ver original.flecha-multi-derecha {
  border-color: transparent transparent transparent orange;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}

Código HTML:

Ver original<div class="flecha-multi-derecha"><!-- flecha --></div>

y están los ejemplos para las otras orientaciones.

Saludos

IsaBelM · #7 (**permalink**) 24/12/2011, 15:37

sólo he logrado que funcione en chrome, pero algo me dice que para ti eso no es un problema

Cita:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
input#proposition {
font: 20px monospace;
resize: none;
border-width: 1px;
border-color: #A2D6EB;
border-style: solid;
padding: 0 15px 0 0;
background: #A2D6EB;
outline: none;
}

button#generate {
position: relative;
padding: 4px 10px;
background: #A2D6EB;
color: black;
left: 1px;
top: -3px;
border: none;
outline: none;
vertical-align: middle;
}

form#logicarama {
height:30px;
padding:0 0 0 10px;
line-height:2;
}

#generate:before, #generate:after {
content: "";
position: absolute;
/* Pushed down half way, will get pulled back up half height of triangle ensures centering if font-size or line-height changes */
top: 50%;
width: 0;
height: 0;
}

#generate:before {
left: -15px;
/* Triangle */
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #FFF;
/* Pull-up */
margin-top: -5px;
}

#generate:after {
/* Smaller and different position triangle */
left: -5px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #A2D6EB;
margin-top: -6px;
}
</style>
</head>
<body>

<form id="logicarama" action="" method="POST">
<input type="text" id="proposition" class="ninecol last" />
<button type="submit" id="generate">Generar</button>
</form>

</body>
</html>

ahora a "soportar" a la familia

emprear · #8 (**permalink**) 24/12/2011, 18:14

bueno, estuve analizando el ejemplo en particular, y no solo la generación de las flechas

hice esto, que por lo pronto funciona en IE7+ (si la F12 de ie9 no me engaña), Chrome. FF, opera, Safari. Sirve con un input submit tanto como con un div.

Se puede optimizar, y habría que buscar corregir algun detalle con la alineación vertical de los textos del boton y del input text
Y el efecto hover, lo modifique un poco (me gustó más)

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
.contiene_input{
padding: 0;
margin: 0;
border: none;   
height: 26px;
}
 
.contiene_input input{
float:left;
border: none;
background-color:#3A6411;
padding: 1px 2px 0px 2px;
margin: 0;
width: 200px;
height: 25px;
}
 
.contiene_input div{
float:left;
background-color:#3A6411;
padding: 0;
margin: 0;
height: 100%;
}
 
.flecha-izq {
  border-color: transparent white transparent transparent;
  border-style:solid;
  border-width:5px;
  margin-top: 7px;
  width:0;
  height:0;
  display: inline-block;
}
 
.ccolor {
background-color: #fff !important;
}
.f-tres {
border-color: transparent #3A6411 transparent transparent !important;
margin-left: -5px;
clear: both;
}
 
.f-dos {
border-color: transparent red transparent transparent !important;
margin-left: -5px;
clear: both;
}
 
div.texto {
padding: 0 8px;
background-color: red;
}
 
input.texto {
width: 80px;
height: 26px;
}
 
div.texto:hover, input.texto:hover{
margin-left: -5px;
cursor: pointer;
}
 
/*]]>*/
</style>
</head>
<body>
<div>
<p>Con un div</p>
<div class="contiene_input">
<input type="text" /><div><span class="flecha-izq"><!-- flecha --></span></div><div class="ccolor"><span class="flecha-izq f-dos"><!-- flecha --></span></div><div class="texto">texto</div>
 
</div>
 
<p>Con un input submit</p>
<div class="contiene_input">
<input type="text" /><div><span class="flecha-izq"><!-- flecha --></span></div><div class="ccolor"><span class="flecha-izq f-tres"><!-- flecha --></span></div><input type="submit" class="texto" value="procesar" />
</div>
</div>
</body>
</html>

Parto a la cena navideña/familiar
Un saludo y Feliz Navidad para todos

_cronos2 · #9 (**permalink**) 30/12/2011, 09:19

Cita:

Iniciado por emprear

@_cronos2

Pregunto?
Que parte de mi ejemplo usa algo más que CSS?
Por lo de usar divs?

Claro, hacerlo con :after y :before te libra de tener que poner tú los divs en el HTML, al fin y al cabo hacer flechas debería ser algo que se pudiera hacer única y exclusivamente con CSS, sin necesidad de divs auxiliares. O así lo veo yo

Cita:

Iniciado por IsaBelM

sólo he logrado que funcione en chrome, pero algo me dice que para ti eso no es un problema

ahora a "soportar" a la familia

Bueh, para una vez que necesito IE7+

Gracias anyway :)
Al final he usado el método de @emprear

Pasé su código a este jsfiddle para poder verlo ordenado

Y mi ejemplo ha quedado así (más o menos, en realidad el ejemplo no está completo porque falta un poco de CSS para que se vea del todo bien, pero básicamente así es como quedó).
Saludos y gracias por todo :D
Edit: Wehe, mensaje 2001!

C2am · #10 (**permalink**) 30/12/2011, 16:59

Hola
Me tome el atrevimiento de modificar un poquito el código de emprear, solo para que las flechita penetrara o se solapara a la parte verde en el ejemplo del div.
http://jsfiddle.net/c2am/BWCWk/
Saludos

emprear · #11 (**permalink**) 30/12/2011, 17:59

Cita:

Iniciado por C2am

Hola
Me tome el atrevimiento de modificar un poquito el código de emprear, solo para que las flechita penetrara o se solapara a la parte verde en el ejemplo del div.
http://jsfiddle.net/c2am/BWCWk/
Saludos

C2am, atrevimiento ninguno, para eso está esto para mejorar si se puede. Todavía no analicé tu código, pero vi el resultado, muy bueno. esa es una de las mejoras que me quedó pendiente por hacerle, como vi que con el input me funcionaba, me puse vago y abandoné la investigación. Experimenta un poco cuando puedas con lo de la alineación vertical, del texto en los diferentes navegadores.
Saludos

IsaBelM · #12 (**permalink**) 02/01/2012, 08:07

con un botón. aparte del efecto que añadió C2am, añadirle otro efecto. en funcionamiento

Cita:

<!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>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.controles *{
display: inline-block;
}

.controles [type=text] {
width: 210px;
height: 24px;
background-color: #CCC;
box-shadow: inset 0 25px 10px -10px rgba(255, 255, 255, 0.2);
padding: 0 2px;
margin: 0;
outline: none;
border: 0;
vertical-align: middle;
}

.controles .flecha-izq {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #FFF;
margin-left: -10px;
vertical-align: middle;
}

.controles .flechaYboton {
position: relative;
left: 5px;
}

.controles .flechaYboton .f-der {
margin-right: -4px;
border-right: 6px solid #A2D6EB;
}

.controles .flechaYboton [type=submit] {
background-color: #A2D6EB;
width: 79px;
height: 24px;
text-align: center;
font-weight: bold;
border: 0;
vertical-align: middle;
}

.controles .flechaYboton:hover{
margin-left: -5px;
}

.controles .flechaYboton:hover [type=submit] {
width: 84px;
background-color: #C5F0FF;
}

.controles .flechaYboton:hover .f-der {
border-right: 6px solid #C5F0FF;
}
</style>
</head>
<body>

<div class="controles">

<input type="text" value="" />

<span class="flecha-izq"></span>

<div class="flechaYboton">
<span class="flecha-izq f-der"></span>
<input type="submit" class="boton" value="Enviar" />
</div>

</div>

</body>
</html>

furoya · #13 (**permalink**) 14/05/2012, 17:07

Excelentes esos ejemplos.
Recién los veo.

Mientras leía, estuve por ponerme a "corregir" el solapamiento del último código de emprear, pero supuse que más abajo lo habían hecho. Y no me equivoqué. (Mejor, porque no me estaba saliendo).

Si no les molesta, y teniendo en cuenta que los dibujos son más de flecha que de triángulo además de ser botones, voy a linkear el tema a otro que tiene las palabras "flecha" y "botones" en el título, y que suele ser destino de búsqueda en gugl nada más que por eso, no porque el que puso sus ejemplos finales haya hecho gran cosa ( Botones tipicos con cabeza de flecha); así cuando lo vean van a pasar por aquí también.
Y viceversa.