[SOLUCIONADO] CSS3 - Div style

[estaisaderezados]

Hola,

Puedo hacer con css3, que un div con forma rectangular, en la parte central del borde inferior, tenga un saliente, como si fuera una viñeta.

Muchas gracias,

[AngelKrak]

no entendi muy bien eso ._. que es lo que quieres amigo? podrias mostrar una foto de lo que quieres o especificar mejor lo que quieres?

[estaisaderezados]

Si la verdad, es que no me explicado muy bien, a ver ahora:

Quiero realizar con css, el típico bocadillo, igual que la cuarta imagen que aparece, la única diferencia, es que el rabillo, lo quiero recto y en medio del borde inferior del rectángulo.



¿Sería posible?

Gracias,

[estaisaderezados]

https://www.google.es/search?q=vi%C3%B1etas&biw=1778&bih=896&source=lnms &tbm=isch&sa=X&sqi=2&ved=0CAYQ_AUoAWoVChMIut3cw 6-ZyAIVyLIUCh0UuADG&dpr=0.9#tbm=isch&q=vi%C3%B1etas+ bocadillos&imgrc=6urBhrVOIjC9EM%3A

[AngelKrak]

seria algo como esto lo que quieres amigo?

Código HTML:

<div class="vin">
  Text
</div>
 

Código CSS:

.vin {
  width: 230px;
  height: 70px;
  border: 1px solid #DDDDDD;
  padding-left: 10px;
  padding-top: 10px;
  margin: 100px auto;
}
.vin::before {
  content: "";
  border-left: 8px solid transparent;
  border-top: 15px solid #AAAAAA;
  border-right: 8px solid transparent;
  position: absolute;
  left: 48%;
  bottom: 66.8%;
}
 

http://codepen.io/AngelKrak/pen/OybBBW

[estaisaderezados]

Gracias, pero este ejemplo no me sirve, en IE no se ve bien.

[estaisaderezados]

Con el ejemplo, que me has pasado, he toqueado un poco y me ha funcionado:

.vin {
width: 150px;
border: 1px solid #ddd;
padding: 10px;
margin: 100px auto;
}
.vin::before {
content: "";
border-left: 8px solid transparent;
border-top: 15px solid #aaa;
border-right: 8px solid transparent;
position: relative;
left: 56px;
bottom: -42px;
}

Gracias,