Vlad Tytcky

window.onresize=function(){
  if(someDiv.style.height>36){
    someDiv.classList.add('some-class');
  }
}

но для этой проблемы совершенно не нужен js, нужна адаптивная верстка

Span:before дать vertical-align:middle;

left:-25px;
right:none;

вот если я правильно понял. Только, чтобы красная часть линии появлялась, от нажатия именно на ссылку, нужен js. По-другому никак

Вот сверстано ужасно и на скорую руку, но суть, думаю, понятна. Просто нужны skew z-index и after. А чтобы изменить цвет нижнего блока в зависимости от активной ссылки, нужен JS:)

вот в первом блоке через градиент, во втором через after. У градиента есть небольшой минус- это плохое сглаживание, зачастую наблюдается при контрасте, а вот через after, такого не нет.Да и after поддерживается IE 9,8 ;)

float:right- решает

.wrapper {
  float:right;
  width: 600px;
}

.block {
 height: 70px;
  width: 100%;
  background-color: grey;
}

ну или можно через position:absolute-задать right:0 и все