topbar con triangulos en las esquina

Pax-Man · #1 (**permalink**) 18/10/2012, 17:01

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<!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;
                vertical-align: bottom;
                height: 26px;
                border-top: 3px solid #2b813b;
            }
 
            .topbar-middle{
                height: 26px;
                width: 300px;
                margin:0 auto 0 auto;
                background-color: #2b813b;
            }
 
            .triangulo_top_right {
                width: 0;
                height: 0;
                float:right;
                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 class="triangulo_top_left"></div>
            <div class="topbar-middle">Prueba de Topbar</div> 
            <div class="triangulo_top_right"></div>
        </div>      
    </body>
</html>

flashmax · #2 (**permalink**) 18/10/2012, 19:50

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>