Foro de Ayuda IntercambiosvirtualeS - Creando una cinta para el banner de nuestra web..

Hola que tal.. en esta ocación les traigo como crear diseño básico con un truco para crear un banner de tipo cinta... con ciertos span para generar el truco (ya que tenemos que saber que la etiqueta apan es una etiqueta estructurar a nivel caracter) por tanto nos permite crear una y otra etiqueta anidada dentro de otra, como por ejemplo en este caso las hemos anidado dentro de una etiqueta h1.. sin más prehambulos al tutorial y Feliz Navidad para TOD@S..!

Código html
<body>
<div id="container">
<h1> Intercambiosvirtuales.<span class="caracter">org</span> <span class="truco"></span> </h1>
<p>En busca del conocimiento...</p>
<div class="content">

</div>
</div>
</body>

Estilos css
<style type="text/css">
#container {
background: #870000;
margin: auto;
width: 900px;
height: 700px;
padding-top: 30px;
font-family: helvetica, arial, sans-serif;
}
p{margin:0px; position:absolute; top:78px; left:370px; text-shadow: 0 0 3px #f00; color:white;}
h1 {
background: #e3e3e3;
background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
padding: 10px 20px 15px 20px;
margin-left: -20px;
margin-top: 0;
position: relative;
width: 70%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
color: #454545;
text-shadow: 0 1px 0 white;
box-shadow: inset 0 0 7px rgba(0,0,0,.7);
}
.truco {
width: 0;
height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #c8c8c8;
top: 100%;
left: 0;
box-shadow: inset 0 0 3px rgba(0,0,0,1);
position: absolute;
}
.content{
width:630px;
height:80%;
background:white;
margin:0 300px 0 20px;
border-radius:0 0 20px 0;
}
.caracter{font:size: 120px; color:red; text-shadow:0 0 5px #f00;}
</style>



</head>

http://i.imgur.com/5iGpH.png