paramid

jQuery(function($){
	$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $("#popup"); // тут указываем ID элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { // и не по его дочерним элементам
			div.hide(); // скрываем его
		}
	});
});

то что нужно?
естественно, как сказали выше, многое придется дописать
ссылка

HTML

<svg>
   <defs>
      <pattern id="lines-pattern_red"
         x="0" y="0" width="11" height="40"
         patternUnits="userSpaceOnUse"
         patternTransform="rotate(45)">
         <g>
            <rect x="0" y="0" width="6" height="40" fill="#ef3f37" />
            <rect x="6" y="0" width="5" height="40" fill="#ffffff" />
         </g>
      </pattern>
      <clipPath id="clip-triangle">
         <polygon points="30 0,1400 0,1400 60, 1370 90, 0 1400,0 30" />
      </clipPath>
   </defs>
</svg>
<svg viewBox="0 0 1400 90" >
   <rect class="svg-rect" x="0" y="0" width="100%" height="100%"  fill="url(#lines-pattern_red)" />
</svg>

CSS
.svg-rect { clip-path: url(#clip-triangle); }

<div class="menu">
    <div class="menu__icon">
                   <span class="menu__icon-span1"></span>
                   <span class="menu__icon-span2"></span>
                   <span class="menu__icon-span3"></span>
               </div>
         </div>
</div>

vh-vw это просто единицы измерения.

.element{
margin-top: calc(50vh-n) // n - тут не прокатит, это переменная, её нельзя пропихнуть в css
}

это css, в нём особо не покодишь, переменных тут нет, если не использовать препроцессоры.
нужно использовать js, и непосредственно js`ом работать с размерами.
используя библиотеку jquery, например
var h = $('#container').css('height');