Lima gambar pada satu elemen
Trik utamanya adalah untuk menghasilkan konten ('::before' and '::after') untuk dapat menaruh empat gambar tambahan pada sebuah elemen. Psuedo-elemen '::before' dapat memiliki sebuah latar belakang dan sebuah latar depan, dan pseudo-element '::after' juga, serta elemen tersebut dapat memiliki latar belakang, sehingga semuanya berjumlah lima gambar.
Kami telah membuat lima gambar PNG dan menaruhnya di keempat pojok dan di sebelah sisi kanan elemen. Berikut gambarnya:
- pojok kiri atas:
- bagian atas dan pojok kanan atas:
- bagian tengah serta bagian sisi kanan:
- pojok kiri bawah:
- sisi bawah dan pojok kanan bawah:
Dan berikut adalah aturan-aturan CSS untuk memposisikan gambar tersebut:
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) }
Karena gambar latar belakang kita lebarnya 620px, kita tidak dapat membiarkan kotak dengan lebar lebih dari 620px, tanpa membuat adanya jarak. Itulah mengapa properti 'max-width' ada disana. Properti 'display: block' dibutuhkan untuk memastikan bahwa konten yang dihasilkan membentuk kotak tersebut diatas dan dibawah kotak utama, dan bukan ditaruh di baris pertana dan terakhir. Properti 'line-height: 0' memastikan tidak ada jarak untuk naik atau turun disisi atas atau bawah gambar dari properti 'content'.
