Texto en borde CSS HTML

Resuelto Alex Bliskovsky asked hace 13 años • 12 respuestas

Me gustaría tener un div que se vea así:

ejemplo de borde

¿Es esto posible hacer con HTML + CSS? También animaré este div con jQuery. Cuando el div está oculto, me gustaría que se mostraran el título y la línea superior.

Oct 12 '11 02:10 Alex Bliskovsky

Aceptado

Sí, pero no es un div, es unfieldset

fieldset {
    border: 1px solid #000;
}

<fieldset>
  <legend>AAA</legend>
</fieldset>

Expandir fragmento

Oct 11 '2011 19:10 Bazzz

Puedes hacer algo como esto, donde estableces un negativo marginen h1(o cualquier encabezado que estés usando)

div{
    height:100px;
    width:100px;
    border:2px solid black;
}

h1{
    width:30px;
    margin-top:-10px;
    margin-left:5px;
    background:white;
}

Nota: debe configurar a backgroundy a widthen elh1

Ejemplo: http://jsfiddle.net/ZgEMM/

EDITAR

Para que funcione ocultando el archivo div, puedes usar jQuery como este

$('a').click(function(){
    var a = $('h1').detach();
    $('div').hide();
    $(a).prependTo('body');    
});

(Tendrá que modificar...)

Ejemplo #2: http://jsfiddle.net/ZgEMM/4/

Oct 11 '2011 19:10 Jason Gennaro