Foros del Web » Creando para Internet » CSS »

topbar con triangulos en las esquina

Estas en el tema de topbar con triangulos en las esquina en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/10/2012, 17:01
 
Fecha de Ingreso: noviembre-2003
Mensajes: 403
Antigüedad: 21 años, 1 mes
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>
  #2 (permalink)  
Antiguo 18/10/2012, 19:50
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 12 años, 4 meses
Puntos: 86
Respuesta: topbar con triangulos en las esquina

Hola haber si así lo solucionas:
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>
        <title>Prueba</title>
        <style>
            body {
                background-color: #fff;
                margin: 0 0 0 0;
            }
 
            .topbar-line{
                width: 100%;
                background: #fff;
                text-align: center;
                height: 3px;
				background-color:#2b813b;
            }
			
			.contenedor-topbar{
                width: 326px;
				height: 26px;
				margin: 0 auto;
            }
 
            .topbar-middle{
                height: 26px;
                width: 300px;
				float:left;
                background-color: #2b813b;
            }
 
            .triangulo_top_right {
                width: 0;
                height: 0;
                float:left;
                border-top: 26px solid #2b813b;
                border-right: 13px solid transparent;         
            }
 
            .triangulo_top_left {
                width: 0;
                height: 0;
                float:left;
                border-top: 26px solid #2b813b; 
                border-left: 13px solid transparent;           
            }
        </style>
    </head>
 
 
<body>
<div class="topbar-line"></div>
        <div class="contenedor-topbar">
<div class="triangulo_top_left"></div>
            <div class="topbar-middle">Prueba de Topbar</div> 
            <div class="triangulo_top_right"></div>
            </div>
</body>
</html> 
__________________
Saludos!
----------------------------------------------------------

Etiquetas: ancho, esquina, html, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:23.