Tenho uma <div>
cuja borda tem uma customização diferente do padrão. Ela não é totalmente sólida, ela tem "espaços" abertos na parte superior e na parte inferior.
Exemplo desenhado:
O conteúdo central varia, então o tamanho da <div>
também varia.
O que já tentei:
- Criei 2
<div>
, uma embaixo com a borda sólida e a outra em cima com o fundo branco, porém, não ficou prático; - Utilizei pseudo-elementos para alocar a borda na direita e na esquerda, mas também não ficou legal por causa que o tamanho varia;
- Usei
border-image
, mas também não ficou bom.
Alguém tem sugestão?