Voi arata in exemplul acesta cum sa creem un dreptunghi rotunjit ca cel de mai sus.Vom avea nevoie de urmatoarele imagini:
colt_stanga.gif
colt_dreapta.gif
mijloc.gif
colt_jos_stanga.gif
colt_jos_dreapta.gif
Smecheria principala este sa folosim pseudo-elementele "before" si "after". Regulile CSS folosite sunt:
blockquote {
max-width: 253px;
background: url(mijloc.gif) right repeat-y }
blockquote:before {
display: block;
line-height: 0;
background: url(colt_dreapta.gif) top right no-repeat;
content: url(colt_stanga.gif) }
blockquote:after {
display: block;
line-height: 0;
background: url(colt_jos_dreapta.gif) bottom right no-repeat;
content: url(colt_jos_stanga.gif) }
iar HTML este:
Ar trebui sa vedeti un dreptunghi cu colturile rotunjite si umbrite. Altfel, s-ar putea ca browser-ul dvs sa nu supert CSS.
Deoarece imaginea nosatra de fundal are 253px, nu putem ingadui dimensiunea mai lata de 253px pentru cam am obtine goluri.
Regula "display: block" este necesara pentru a ne asigura ca, colturile vor fi deasupra si dedesuptul continutului principal, iar nu pe prima si ultima linie.
Regula " line-height: 0" este pentru ca sa ne asiguram ca nu va ramanea spatiu la proprietatea "content".
Incepand cu CSS3 s-ar fi putut sa facem colturi rotunde si mai simplu, dar nu am fi avut si imagine de fundal. De exemplu, daca am dori ca sa avem un paragraf inconjurat cu o dunga rosie, ce are si o umbra, am fi putut folosi si urmatoarea regula:
