paramid

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');