min < window.innerWidth < max

Не вижу, где обрезается картинка. Самый простой вариант - все треугольники сделать отдельными блоками, позиционировать абсолютно от родительского контейнера с крупной полосой и текстом, далее анимировать, transform и opacity в помощь.

$('body').on('click', function(event){
		if (!$(event.target).closest('.menu').length) {
			$('.menu').removeClass('menu-opened')
		}
	});

Советую попробовать самостоятельно предложенные варианты и определить, что именно окажется более удобным.
Лично я предпочитаю использовать "свои" сетки, имхо, они делают код чище, чем при использовании бутстрапа.