Hacer menú con triángulo hacia adentro

[pzin]

Crear triángulos de forma invertida en CSS no puede hacerse así tal cual. Tendrías que aplicar el truco de los bordes pero a dos elementos diferentes. Como existen dos pseudo-elementos, :before y :after, podrías hacer algo así:

Código HTML:

<div>
  <img src="imagen.jpg">
</div>
 

Código CSS:

div {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
 
div:before,
div:after {
  position: absolute;
  top: 0;
  left: -30px;
  width: 50%;
  border-top: 30px solid;
  border-right: 30px solid transparent;
  color: white;
  content: '';
}
div:after {
  right: -30px;
  left: auto;
  border-right: none;
  border-left: 30px solid transparent;
}
 

Quedaría como esto: