da questo sito www.cssplay.co.uk/boxes/chunky.html ho trovato un bell'esempio per creare un box-fumetto e solo con lì'uso di css e html.
[approposito, se conoscete altri siti dove spiegano come realizzare un box-fumetto SENZA l'uso di immagini per favore segnalatemelo, grazie!!]
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 saprà 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:; 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; border-right: 1px solid; }
.xb1 { margin: 0 8px; background:; }
.xb2 { margin: 0 6px; background:; }
.xb3 { margin: 0 4px; background:; }
.xb4 { margin: 0 3px; background:; border-width: 0 5px; }
.xb5 { margin: 0 2px; background:; border-width: 0 4px; }
.xb6 { margin: 0 2px; background:; border-width: 0 3px; }
.xb7 { margin: 0 1px; background:; border-width: 0 3px; height: 2px; }
.xboxcontent {display:block; background:#7f7f9c; border:3px solid #fff; border-width:0 3px;}
