Săgețile în CSS sunt o chestie relativ simplă de făcut: width și height 0, border-width mare și transparent, border-color în direcția opusă față de direcția în care vrem săgeata. Simplu și elegant.
Dar cum ar trebui procedat în cazul unei săgeți ce ar trebui să continue fundalul părintelui? Adică ceva de genul:
De dimineață mă tot gândesc la diverse variante dar nici una utilizabilă. Cea mai apropiată de adevăr ar fi asta dar care nu este prea utilă pentru exemplul din imagine.
Se accepta o restilizare a borderelor? http://jsfiddle.net/h0ufbqLt/
PS: pana si asa, nu merge decat daca imaginea are aceeasi latime cu div-ul pe background-ul caruia e.
Facut cele doua div-uri de acelasi width cu content-ul, si mutate cu -50% in stanga si dreapta asa incat jumatate din ele sa fie acoperite de overflow-ul pus la pasul 1.
In felul asta, div-urile avand aceeasi latime cu cel principal care are pe fundal aceeasi imagine, se va aplica aceeasi scalare.
Solutia asta nu am testat-o, dar oricum, tot nu rezolva problema sagetii, care acum e doar “simulata” cu border-radius.
Pai variaza pentru ca acolo e un gradient, care isi poate modifica nu doar culoarea, ci si densitatea nuantelor pe unitate de latime, mai ales daca o mai fi si cu width fluid. De asemenea, nu toate browserele randeaza gradientii la fel, iar unele folosesc chiar si alte profile de culoare, caz in care nici macar aceeasi culoare nu e randata identic. Asadar, sunt multe surse de variatie in sageata aia aparent simpla.
Si eu ma gandisem la SVG, dar in alta directie, un SVG din care lipseste bucata reprezentata de sageata, si care sa aiba embedded in el imaginea aia “deasupra” careia vine sageata, care SVG sa vina pozitionat apoi peste div-ul cu gradient.
Practic sunt două imagini ce se pot schimba din admin; containerul în care sunt afișate imaginile este fluid, imaginile sunt afișate ca background (iar background-size este pus cover).
Oricum am renunțat la idee, i-am zis clientului că este ceva ce nu se poate realiza într-un mod rezonabil (timp, cross browser etc).
Dar merge putin modificat: