Titulo con efecto solapa

[juancile]

Hola!.

Quisiera saber como se puede lograr el efecto de el recuadro con la solapa en los titulos que se muestra en esta pagina, como se hace con CSS?.

Si no se dan cuenta de que hablo, para ser mas especifico, me refiero al efecto del recuadro del primer titulo que dice "Brothers Streep".

Voy bien con el recuadro, pero no se como añadirle ese triangulo debajo que le da una sensacion de venir de atras del fondo.

Muchas gracias!.

[Mikmoro]

El cuadro no es una imagen, sino esto:

#main .post-title, #main .page-title, #main .comments-title {background-color:#98BDC6;
border:1px solid #6E8D94;
display:inline;
float:left;
margin:0pt 30px 0pt -21px;
padding:12px 25px;
position:relative;
}

Y el triángulo esta imagen:

[kseso?]

el html

Código html:

<div class="post-title">
                        <h2><a title="Brothers Streep" rel="bookmark" href="http://www.markforrester.co.za/2009/10/11/brothers-streep/">Brothers Streep</a></h2>
                        <span class="postfold"> </span>
                    </div>
 

y el css

Código css:

#main .post-title, #main .page-title, #main .comments-title {
background-color:#98BDC6;
border:1px solid #6E8D94;
display:inline;
float:left;
margin:0 30px 0 -21px;
padding:12px 25px;
position:relative;
}
#main .post-title h2 {
display:inline;
font-size:24px;
padding:0;
text-shadow:1px 1px 1px #7D9DA5;
}
#main span.postfold {
background:transparent url(images/post_fold.png) no-repeat scroll center center;
bottom:-15px;
display:block;
height:15px;
left:0;
position:absolute;
width:20px;
 

como verás sólo utiliza una pequeña imagen para simular la sombra con el span.

Un saludo

Edito:

leñes!!! padiez!!! cuán rápido andáis vos!!!

[juancile]

Muchas gracias por responder!.

Lo que pasa es que no se como aplicarlo bien.

Coloque ambos codigos, y modifique la ruta de la imagen para que la tome en mi pc, pero no me funciona.

:S

[alexk]

que raro...

no te funciona = no sale la imagen?
no te funciona = no sale la imagen donde quieres?
no te funciona = no pasa absolutamente nada?
no te funciona = ninguna de las anteriores XD

recuerda que el CSS no es magia igual en el HTML tienes que tener dichas clases
como sea pega tu codigo para que veamos que pasa... chao y suerte!...

[juancile]

Hola gente!.

Disculpen por demorar tanto en responder.

Les cuento que solucione el problema.

Tenia que cambiar #main por el nombre que tengo en mi hoja de estilos. Una tontera.

Gracias!!!.