<style>.relationship { float:right; width:200px;height:320px;position:relative;border:1px solid white;} .relationship img { position:relative;z-index:1; filter: grayscale(100%); } .filtre { position: absolute;top: 0px;left: 0px;width: 0px;height: 0px;border-bottom: 320px solid transparent;border-right: 0px solid transparent;z-index:2} .borderrelat{height:322px;width:500px; background:white;border:10px solid black;} .inforelat h1 {font-size: 20px;text-transform: uppercase; border-top: 1px solid black; border-bottom: 1px solid black; padding:5px; } .inforelat{width:260px;float:left;margin-top: 15px;margin-left: 20px;} .inforelat h2 {text-transform: uppercase; font-size: 12px;} .inforelat p { height: 200px;overflow: auto;padding-right: 5px;text-align: justify;font-size: 12px;font-family: arial;}</style>
<center>

<div class="borderrelat"><div class="inforelat"><!--

--><h1>Nom</h1><h2>I feel a little lonely</h2><p>Décris ton personnage en quelques lignes. physiquement et mentalement. Un peu d'histoire si le cœur t'en dis.

[b]Relation [/b]: nom et description

[b]Relation [/b]: nom et description

[b]Relation [/b]: nom et description

[b]Relation [/b]: nom et description

[b]Relation [/b]: nom et description

[b]Relation [/b]: nom et description</p></div><div class="relationship"><div class="filtre"></div><!--

--><img src="http://i.imgur.com/mOu5De2.png"/></div>
<div style="clear:both;"></div>
</div>
<a style="font-size:9px; font-family:arial;text-transform:uppercase" href="http://libre-graph.forumperso.com/"/>Codage Reira</a>
</center>

<style> .relationship { float:right; width:200px;height:320px;position:relative;border:1px solid white;}  .relationship img { position:relative;z-index:1;filter: grayscale(100%); } .filtre { position: absolute;top: 0px;left: 0px;width: 0px;height: 0px;border-bottom: 320px solid transparent;border-right: 0px solid transparent;border-left: 130px solid white;border-left: 130px solid white;z-index:2} .borderrelat{height:322px;width:500px; background:white;border:10px solid black;} .inforelat h1 {font-size: 20px;text-transform: uppercase; border-top: 1px solid black; border-bottom: 1px solid black; padding:5px; } .inforelat{width:260px;float:left;margin-top: 15px;margin-left: 20px;} .inforelat h2 {text-transform: uppercase; font-size: 12px;} .inforelat p { height: 200px;overflow: auto;padding-right: 5px;text-align: justify;font-size: 12px;font-family: arial;}</style>
<center>

<div class="borderrelat"><div class="inforelat"><!--

--><h1>Nom</h1><h2>I'm boring</h2><p>Décris ton personnage et ce qu'il a déjà vécu hors rp, ce qu'il devrait vivre encore et comment il pourrait réagir dans une situation particulaire ou un danger.

[url=http://undertale-rpg-french.forumsrpg.com/]RP 1[/url] : Avec qui et description

[url=http://undertale-rpg-french.forumsrpg.com/]RP 2[/url] : Avec qui et description

[url=http://undertale-rpg-french.forumsrpg.com/]RP 3[/url] : Avec qui et description

[url=http://undertale-rpg-french.forumsrpg.com/]RP 4[/url] : Avec qui et description

[url=http://undertale-rpg-french.forumsrpg.com/]RP 5[/url] : Avec qui et description

[url=http://undertale-rpg-french.forumsrpg.com/]RP 6[/url] : Avec qui et description
</p></div><div class="relationship"><div class="filtre"> </div> <!--

--><img src="http://i.imgur.com/mOu5De2.png"/></div>
<div style="clear:both;"></div>
</div>

<a style="font-size:9px; font-family:arial;text-transform:uppercase" href="http://libre-graph.forumperso.com/"/>Codage Reira</a>
</center>