ORNER UN TITRE OU UN BANDEAU AVEC UN RUBAN.

Le code contient du html, en bleu et du CSS, en marron

CODE

<div id="fond">
<p>&nbsp;</p>
<p ><span style="color:#FFFFFF;"><span  style="font-size:26px;"><span >&nbsp;La&nbsp;p&ecirc;che en Seine et Marne</span></span></span>
<style type="text/css">#fond {
position: relative;
margin: 0px auto;
width: 350px;
background: #008000;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
z-index: 10;
height:110px;
}
.ruban {
background: #00FF00;"
height: 50px;
width: 380px;
position: relative;
left:-15px;
top: 30px;
float: left;
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100;
}
.ruban h2 {
font-size: 25px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
margin:10px;
}
.ruban_gauche {
border-color: transparent #7e9202 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -30px;
top: 65px;
z-index: -1; /*s'affichera sous le rectangle */
}
.ruban_droit {
border-color: transparent transparent transparent #7e9202;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 350px;
top: 35px;
z-index: -1;
}
</style>
</p>
<div class="ruban" >
<h2 ><span style="color:#008000;">Un site pour les p&ecirc;cheurs</span></h2>
</div>
<div class="ruban_gauche">&nbsp;</div>
<div class="ruban_droit">&nbsp;</div>
</div>

RESULTAT

 La pêche en Seine et Marne

Un site pour les pêcheurs