Cita:
Iniciado por bNd170 
Es básicamente imposible, has de crearlo a base de imagenes y posicionamiento
Es posible y además muy fácil. Se usa en muchos sitios.
Realmente sólo es un elemento mayor que su contenedor, que sobresale de este y con usar dos pseudo-elementos para dibujar dos triángulos usando bordes se consigue fácilmente. Luego basta con posicionarlos en el lugar apropiado.
Código CSS:
Ver originalsection {
width: 200px;
margin: 0 auto;
background: #ccc;
}
h1 {
position: relative;
left: -10px;
width: 200px;
padding: 10px;
background: red;
}
h1:before {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-top: 10px solid black;
border-left: 10px solid transparent;
}
h1:after {
content: "";
position: absolute;
right: 0;
bottom: -10px;
width: 0;
height: 0;
border-top: 10px solid black;
border-right: 10px solid transparent;
}
p {
margin: 0;
padding: 20px
}
Para una estructura como esta: