Tema: Intentando hacer triángulos en CSS
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 23/12/2011, 11:15
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Intentando hacer triángulos en CSS
Te muestro que uso para crear flechas

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Flechas con css</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.  
  8. <style type="text/css">
  9. /*<![CDATA[*/
  10.  
  11. /* estilos comunes */
  12. .flecha-arriba,
  13. .flecha-izquierda,
  14. .flecha-derecha,
  15. .flecha-abajo {
  16.   border-style: dashed;
  17.   border-color: transparent;
  18.   border-width: 0.53em;
  19.   display: -moz-inline-box;
  20.   display: inline-block;
  21.   /* manejas el tamaño de la fuente para el tamaño de las flechas */
  22.   font-size: 50px;
  23.   height: 0;
  24.   line-height: 0;
  25.   position: relative;
  26.   vertical-align: middle;
  27.   width: 0;
  28. }
  29.  
  30. /* bordes para las cuatro direcciones */
  31. .flecha-arriba {
  32.   border-bottom-width: 1em;
  33.   border-bottom-style: solid;
  34.   border-bottom-color: #005100;
  35.   bottom: 0.25em;
  36. }
  37. .flecha-izquierda {
  38.   border-right-width: 1em;
  39.   border-right-style: solid;
  40.   border-right-color: #005100;
  41.   right: 0.25em;
  42. }
  43. .flecha-derecha {
  44.   border-left-width: 1em;
  45.   border-left-style: solid;
  46.   border-left-color: #005100;
  47.   left: 0.25em;
  48. }
  49.   .flecha-abajo {
  50.   border-top-width: 1em;
  51.   border-top-style: solid;
  52.   border-top-color: #005100;
  53.   top: 0.25em;
  54. }
  55.  
  56. /* otro método, hay que aplicarlo sobre un elemento de bloque (div) */
  57. .flecha-multi {
  58.   border-color: red green blue orange;
  59.   border-style:solid;
  60.   border-width:20px;
  61.   width:0;
  62.   height:0;
  63. }
  64.  
  65. .flecha-multi-derecha {
  66.   border-color: transparent transparent transparent orange;
  67.   border-style:solid;
  68.   border-width:20px;
  69.   width:0;
  70.   height:0;
  71. }
  72.  
  73. .flecha-multi-arriba {
  74.   border-color: transparent transparent blue transparent;
  75.   border-style:solid;
  76.   border-width:20px;
  77.   width:0;
  78.   height:0;
  79. }
  80.  
  81.  
  82. input{
  83. background-color: transparent;
  84. color: transparent;
  85. }
  86. /*]]>*/
  87. </style>
  88. </head>
  89. <body>
  90.  
  91. <div>
  92. <p>Flechas</p>
  93. <span class="flecha-arriba"><!-- flecha --></span>
  94. <span class="flecha-izquierda"><!-- flecha --></span>
  95. <span class="flecha-derecha"><!-- flecha --></span>
  96. <span class="flecha-abajo"><!-- flecha --></span>
  97.  
  98. <p>Input</p>
  99. <form action="x.php">
  100. <p><input type="submit" value="." class="flecha-derecha" /></p>
  101. </form>
  102.  
  103. </div>
  104.  
  105. <div>
  106. <p>Otro método<br /></p>
  107.  
  108. <div class="flecha-multi"><!-- flecha --></div>
  109. <br /><br />
  110. <div class="flecha-multi-derecha"><!-- flecha --></div>
  111. <br /><br />
  112. <div class="flecha-multi-arriba"><!-- flecha --></div>
  113.  
  114. <p>Input</p>
  115. <form action="x.php">
  116. <p><input type="submit" value="." class="flecha-multi-derecha" /></p>
  117. </form>
  118.  
  119. </div>
  120. </body>
  121. </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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.