Ver Mensaje Individual
  #7 (permalink)  
Antiguo 24/12/2011, 15:37
Avatar de IsaBelM
IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Intentando hacer triángulos en CSS

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
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}