[css] trasformare un DIV in fumetto

[NoWhere]

allor... giorni fà fra mille ricerche che stavo facendo ion rete avevo trovato un sito - credo in inglese - dove spiegava un tool per trasformare, usando solo DIV e CSS, un box dandogli la forma di un fumetto quadrato con freccetta.. avete capito no? e il tutto senza l'utilizzo di immagini!!
si, favola!! solo che quel giorno dimenticai di salvare la pagina, la cachè si cancellò e io stò uscendo pazzo perchè non riesco a trovare più niente!!

Per caso, dico per puro caso, qualcuno può aiutarmi a ritrovare quella guida, quella o un'altra qualsiasi che spieghi come fare quanto detto sù?? ^_^

[miki92]

Temporaneamente ho trovato questo anche se non credo che sia ciò che ti serve.

[NoWhere]

no, perchè utilizza una immagine, quello l'avevo già visto..

[miki92]

Hai provato a cercare su google.com (versione inglese)?

[Ospite]

http://www.cssplay.co.uk/boxes/chunky.html ?

Ciao!

[NoWhere]

http://www.cssplay.co.uk/boxes/chunky.html ?

Ciao!

eh.. non é quello che avevo visto io [era sfondo giallino, spigoloso e con freccia lunga] ma ci siamo avvicinati tantissimo!! grassie!

EDIT:

ho lavoricchiato un pò sul codice css per fare delle prove e capire come funziona.
Voglio portare le frecce al contrario e sopra il box..
ci son riuscito in parte, solo non riesco a capire perchè se messo sotto [come dal sito segnalato] il triangolo scuro si mette sopra il bordo bianco; se invece messo sopra, il trinagolino risulta sempre sotto.
spero di essermi spiegato.. é un pò complicato anche perchè il gioco di tag e css non é semplice...

vi posto il codice css per come sono arrivato a modificarlo, magari qualcuno sà aiutarmi!!...

#container {background:#d8d8ee; width:600px; margin:15px; padding:20px;}
      
      .xsnazzy h1, .xsnazzy h2, .xsnazzy p {margin:0 10px; letter-spacing:1px;}
      .xsnazzy h1 {font-size:2.5em; color:#fc0;}
      .xsnazzy h2 {font-size:2em; color:#234; border:0;}
      .xsnazzy p {padding-bottom:0.5em; color:#eee;}
      .xsnazzy h2 {padding-top:0.5em; padding-left:10px;}
      .xsnazzy {background: transparent; margin:1em;}
      
      .xsnazzy em           { display: block; width: 0; height: 0; color: #d8d8ee; overflow: hidden; border-bottom: 12px solid #ffffff; border-left: 12px dotted transparent; border-right: 12px dotted transparent; margin-left: 500px; }
      * html .xsnazzy em    { width: 24px; height: 12px; w\idth: 0; hei\ght: 0; } /* hack for IE5.5 */
      .xsnazzy span         { display: block; width: 0; height: 0; color: #ffffff; overflow: hidden; border-bottom: 10px solid #7f7f9c; border-left: 10px dotted transparent; border-right: 10px dotted transparent; margin-left: 502px; margin-top: -10px; }
      * html .xsnazzy span  { width: 20px; height: 10px; w\idth: 0; hei\ght: 0; } /* hack for IE5.5 */
      
      
      .xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7  { display: block; overflow: hidden; font-size: 0; }
      .xb1, .xb2, .xb3, .xb4, .xb5, .xb6        { height: 1px; }
      .xb4, .xb5, .xb6, .xb7                    { background: #cccccc; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; }
      
      .xb1 { margin: 0 8px; background: #ffffff; }
      .xb2 { margin: 0 6px; background: #ffffff; }
      .xb3 { margin: 0 4px; background: #ffffff; }
      .xb4 { margin: 0 3px; background: #7f7f9c; border-width: 0 5px; }
      
      .xb5 { margin: 0 2px; background: #7f7f9c; border-width: 0 4px; }
      .xb6 { margin: 0 2px; background: #7f7f9c; border-width: 0 3px; }
      .xb7 { margin: 0 1px; background: #7f7f9c; border-width: 0 3px; height: 2px; }
      
      .xboxcontent {display:block; background:#7f7f9c; border:3px solid #fff; border-width:0 3px;}