Cinco imagens em um elemento
O segredo é usar conteúdo gerado (':before' e ':after') para adicionar as quatro imagens extras no elemento. O pseudoelemento ':before' pode receber uma imagem de fundo e uma imagem na marcação, o pseudoelemento ':after' também pode receber uma imagem de fundo e uma imagem na marcação e finalmente o próprio elemento pode receber uma imagem de fundo, completando as cinco imagens necessárias para obter o efeito.
Nós criamos cinco imagens PNG para colocar nos quatro cantos do box e no lado direito do elemento. Eis as imagens:
- canto superior esquerdo:
- borda superior e canto superior direito:
- parte central e borda direita:
- canto inferior esquerdo:
- borda inferior e canto inferior direito:
E, as regras CSS para posicionar as imagens:
blockquote {
max-width: 620px;
background: url(rs-right.png) right repeat-y }
blockquote:before {
display: block;
line-height: 0;
background: url(rs-topright.png) top right no-repeat;
content: url(rs-topleft.png) }
blockquote:after {
display: block;
line-height: 0;
background: url(rs-bottomright.png) bottom right no-repeat;
content: url(rs-bottomleft.png) }
Uma vez que as imagens de fundo tem uma largura igual a 620px não será possível criar boxes com largura superior a 620px. Esta é razão para termos definido a propriedade 'max-width'. A declaração 'display: block' é necessária para garantir que os conteúdos gerados criem boxes acima e abaixo do conteúdo principal em lugar de serem simplesmente inseridos na primeira e na última linha daquele conteúdo. A declaração 'line-height: 0' garante que nenhum espaçamento seja criado acima e abaixo das imagens definidas para os conteúdos gerados.
