El siguiente es un mixin para [LESS][1] que creé que genera el efecto de bordes doblados dado un elemento HTML y con colores sólidos asociados.

Uso:⌗ 

.flatCornerFold(@foldSize,color,bgcolor,direction,intensity);
  • foldSize: tamaño del doblez en forma de triángulo.
  • color: HEX para doblez (más claro) y sombra (más oscuro).
  • bgcolor: HEX para el fondo del triángulo; debería ser el mismo del fondo de la página (body) para dar el efecto de transparencia.
  • direction: valores: bottomright (por defecto) | topright | topleft | bottomleft.
  • intensity: opacidad (0% ~ 100%) del efecto del doblez.

Ejemplo:⌗ 

@color: #ecf0f1;
@bgcolor: #ecf0f1;
@foldSize: 3rem;
selector {
    .flatCornerFold(@foldSize,@color,@bgcolor,bottomright,25%);
}

Ejemplo Avanzado:⌗ 

selector {
    .flatCornerFold(1rem,#ecf0f1,#ecf0f1,bottomright,25%);
}
selector:after,
    selector:before {
        transition: .3s;
    }
selector:hover {
    .flatCornerFold(3rem,#ecf0f1,#ecf0f1,bottomright,25%);
}

Ver en GitHub

[1]: http://www.csslab.cl/etiqueta/less/ “Enlace en CSSLab a “Etiquetas: LESS””