Cómo crear un menú personalizado con sangrías triangulares a cada lado

Hola,
Puede hacerlo agregando algunas líneas en su CSS. No estoy seguro de si el siguiente proceso es recomendable. He recreado su escenario con mi código a continuación:

CSS:

cuerpo {
tamaño de fuente: 2em;
color de fondo: rgba (0,0,250,0.5);
}
ul {
tipo-estilo-lista: ninguno;
color blanco;
alinear texto: centro;
}
ul li {
margen: -4.5px;
acolchado: 15px;
pantalla: en línea;
color de fondo: negro;
radio de borde: 15px;
}

HTML:

Salida:

Aclamaciones,
Nitin Nair | Diseñador web | Poeta