Tema: topbar con triangulos en las esquina
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/10/2012, 17:01
Pax-Man
 
Fecha de Ingreso: noviembre-2003
Mensajes: 403
Antigüedad: 20 años, 5 meses
Puntos: 4
topbar con triangulos en las esquina
Saludos amigo, estoy en proceso de duplicar este topbar



Originalmente esta diseñado como toda una imagen fija, triangulos y centro, y una imagen de 1px de ancho que se repite en todo el div para hacer la linea delgada superior que se aprecia en los extremos...

Pienso que es posible hacerlo en puro css, y buscando informacion de como hacerlo, lo primero fue buscar como hacer los triangulos, y consegui esto: http://www.bufa.es/css-dibujar-triangulos/

que me ha funcionado bien, para hacerlos, pero el problema q tengo ahora es la ubicacion de los div unos al lado del otro, bueno anexo el codigo de la barra para que vean pos su cuenta que esta pasando y me digan que se puede hacer...



Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4.     <head>
  5.         <title>Prueba</title>
  6.         <style>
  7.             body {
  8.                 background-color: #fff;
  9.                 margin: 0 0 0 0;
  10.             }
  11.  
  12.             .topbar-line{
  13.                 width: 100%;
  14.                 background: #fff;
  15.                 text-align: center;
  16.                 vertical-align: bottom;
  17.                 height: 26px;
  18.                 border-top: 3px solid #2b813b;
  19.             }
  20.  
  21.             .topbar-middle{
  22.                 height: 26px;
  23.                 width: 300px;
  24.                 margin:0 auto 0 auto;
  25.                 background-color: #2b813b;
  26.             }
  27.  
  28.             .triangulo_top_right {
  29.                 width: 0;
  30.                 height: 0;
  31.                 float:right;
  32.                 border-top: 26px solid #2b813b;
  33.                 border-right: 13px solid transparent;         
  34.             }
  35.  
  36.             .triangulo_top_left {
  37.                 width: 0;
  38.                 height: 0;
  39.                 float:left;
  40.                 border-top: 26px solid #2b813b; 
  41.                 border-left: 13px solid transparent;           
  42.             }
  43.         </style>
  44.     </head>
  45.  
  46.  
  47.     <body>
  48.         <div class="topbar-line">
  49.             <div class="triangulo_top_left"></div>
  50.             <div class="topbar-middle">Prueba de Topbar</div> 
  51.             <div class="triangulo_top_right"></div>
  52.         </div>      
  53.     </body>
  54. </html>