Sugestões para fazer esse efeito nas bordas

[rikaschmitt 54]

Olá pessoal.

 

Estou com um problema em customizar uma box de informações.

É uma box que tem textos no meio e as bordas laterais são diferentes, com um detalhe nas pontas.. como mostra o exemplo que eu fiz: http://i.imgur.com/Kj9sciB.jpg

 

Já tentei fazer utilizando 2 <div>, uma embaixo com a border sólida e outra por cima com background branco. O problema é que o conteúdo dessa box varia, então os tamanhos também variam, não ficou prático.

 

Já tentei fazer utilizando pseudo-elementos para colocar o efeito na direita e na esquerda, porém o tamanho varia e fica bem ruim.

 

Também já tentei usar border-image, mas não ficou legal.

 

Alguém tem outra sugestão? :(

[L. Henrique 179]

Rikas,

Acho que tenho duas sugestões... Eu fiz um teste no JSFiddle e percebi que em cima do box fica tudo ok (margin negativa no texto), mas percebi que sobrou um baita padding no fim do box. Tentei com SVG e não deu muito certo, mas ai me lembrei que existia a propriedade outerHeight no jQuery que pode nos ajudar bastante.

Veja o meu exemplo aqui no JSFiddle. Eu adicionei a função no botão pra ilustrar, mas basicamente o que você vai precisar está ai.

Pega os elementos textos (via className ou byId), calcula a altura deles com o outerHeight, remove com uma subtração simples e aplica no box (pode ser aplicado com parent(), next(), prev(), dependendo de como montar).

Isso te ajuda?

[rikaschmitt 54]

Valeu L. Henrique.

 

Vou testar daqui a pouco. Também me sugeriram ficar nos pseudo-elementos que é simples, então também vou retestar eles.

[pwd 7]

Só não entendi se o texto vai escapar do box.

 

Bom, minha é : http://www.border-image.com/

[Public2004 79]

Já tentei fazer utilizando 2 <div>, uma embaixo com a border sólida e outra por cima com background branco. O problema é que o conteúdo dessa box varia, então os tamanhos também variam, não ficou prático.

 

 

Esta seria uma boa solução para o que você quer. Porque não ficaria prático? Mesmo com conteúdo variável você pode trabalhar com as dimensões em percentuais ou auto, ajustar a div sobreposta definindo um margin nas laterais e margin negativa no topo e bottom para que o background branco cubra as bordas escuras da div inferior.

 

Att.

[rikaschmitt 54]

Então pessoal, consegui utilizando pseudo-elementos mesmo.

Um coleguinha me ajudou de outro fórum.

 

Segue o código CSS:

.borda {
position:relative;
float:left;
padding:0 20px; /* espaço nas laterais */
font-size:20px;
}

.borda:before,.borda:after {
content:''; display:block;position:absolute;
border:1px solid black;
top:8px; bottom:8px; /* espaço no topo e embaixo */
width:13px; /* largura das "chaves" */
}

.borda:before {
left:2px; border-right:none;
}

.borda:after {
right:2px; border-left:none;
}

valeu \o