Bueno como ya saben y lo digo en todos mis post el tutorial es escrito en el momento por lo cual les pido perdon si hay algún error de ortografía,bueno para este tutorial necesitan el Dreamweaver cs5 bueno es el que yo uso pero si quieren también se puede usar el bloc de notas la diferencia entre los dos es que en bloc de notas tenes que guardar como... .html y/o .css ok...Por ultimo antes de empezar los comentarios agresivos van a ser borrados y depende de lo que haya puesto el usuario va a ser bloqueado a continuación van a ver una demo
DEMO
ok vamos a comenzar el tutorial vamos a archivo-nuevo y seleccionamos html y le damos a crear
una vez creado el documento vamos a apretar CTRL+S ¿que hacemos con eso? eso indica al programa que guarde los cambios pero como todavia no lo guardamos nunca nos va a decir que lo guardemos y lo guardamos con el nombre de index.html
Ok ahora vamos al <head></head> y nos posicionamos abajo del titulo....donde esta marcado con rojo!
ahí ponemos el siguiente codigo
[color=#000000][color=#000000]<link type="text/css" rel="stylesheet" href="estilo.css"/>
OJO! si esta dentro de una carpeta seria asi
<link type="text/css" rel="stylesheet" href="carpeta/estilo.css"/>[/color][/color]
bueno en mi caso lo voy a poner en la misma carpeta por ende voy a usar el primer código quedaría así
ustedes dirán pero ese css no existe...no existe pero mas adelante lo vamos a crear...bueno ahora dentro del body vamos a poner la etiqueta <h1></h1>
bien ahora aca...
vamos a poner un class con el nombre de ribbon
ahora vamos a añadir la etiqueta <strong></strong> y vamos a hacer lo mismo que con el h1 pero en el nombre vamos a poner ribbon-contenido
Ok ahora vamos a apretar F12 para poder visualizar el proceso en el navegador ok ahora no nos va aparecer nada porque todavía no hay nada en el css pero dejen la pagina abierta
Ok una vez terminado el html pasamos al css ahora viene lo bueno 
para empezar vamos a crear un nuevo archivo para eso vamos a Archivo-Nuevo y en vez de elegir html elegimos css
para empezar vamos a crear un nuevo archivo para eso vamos a Archivo-Nuevo y en vez de elegir html elegimos cssahora que lo creamos vamos a guardarlo vamos a apretar CTRL+S y lo guardamos como estilo.css
Ok ahora vamos a agregar el siguiente código ¿que hace? bueno esto seria el rectángulo principal del ribbon
[color=#000000][color=#000000].ribbon {
font-size: 16px !important;
width: 50%;
position: relative;
background: #950000;
color: #fff;
text-align: center;
padding: 1em 2em;
margin: 2em auto 3em;
}[/color][/color]
Resultado
bien ahora abajo pegan esto ¿que es? seria la parte en punta del ribbon del lado derecho
[color=#000000][color=#000000].ribbon:before, .ribbon:after
{
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #600000;
z-index: -1;
}[/color][/color]
Resultado
muy bien ahora del otro lado del ribbon
[color=#000000][color=#000000].ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}[/color][/color]
Resultado
bien ahora vamos a poner el siguiente código ¿que hace? bueno esto posiciona del lado derecho el final de ribbon
[color=#000000][color=#000000]
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
[/color][/color]
Resultado
bien solo nos falta un poco mas ahora vamos a poner el siguiente codigo ¿que hace? bueno parece que no hace nada pero si bueno miren el resultado y van a ver un pequeño triangulo
[color=#000000][color=#000000]
.ribbon .ribbon-contentenido:before, .ribbon .ribbon-contentenido:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #4575ba transparent transparent transparent;
bottom: -1em;
}
[/color][/color]
Resultado
bueno ahora abajo pegan este código ¿que hace? bueno este seria la parte de atrás del lado izquierdo
[color=#000000][color=#000000]
.ribbon .ribbon-contentenido:before {
left: 0;
border-width: 1em 0 0 1em;
}
[/color][/color]
Resultado
ahora solo nos falta la derecha para eso vamos a poner el siguiente código
[color=#000000][color=#000000]
.ribbon .ribbon-contentenido:after {
right: 0;
border-width: 1em 1em 0 0;
}
[/color][/color]
Resultado
HTML
[color=#000000][color=#000000]
<h1 class="ribbon">
<strong class="ribbon-contentenido">Este Es un tutorial de boca_97 si te gusto recomendalo</strong>
</h1>
[/color][/color]
CSS
[color=#000000][color=#000000]
.ribbon {
font-size: 16px !important;
width: 50%;
position: relative;
background: #950000;
color: #fff;
text-align: center;
padding: 1em 2em;
margin: 2em auto 3em;
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #600000;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-contentenido:before, .ribbon .ribbon-contentenido:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #4575ba transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-contentenido:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-contentenido:after {
right: 0;
border-width: 1em 1em 0 0;
}
[/color][/color]