Vlad Tytcky

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

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

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

codepen.io подойдет? если у вас на заднем плане картинка, то копайте в сторону SVG

left:-25px;
right:none;

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

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

flex

codepen.io/vlad7576/pen/xZWZdQ?editors=1100 . Уменьшайте экран, все вроде все как в windows. Возможно, это своеобразные костыли и при увеличении количества блоков верстка падает, но, может, натолкнет на мысль :)

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

Это связано с низким разрешением экрана. И сделать тут скорее всего ничего нельзя. По крайней мере, гугление ничего не дало. Можно поменять border на 2px, или увеличить width и height до 35px, если это, конечно, не принципиально:)

codepen.io/vlad7576/pen/NxvvEQ Если нужно, чтобы блок был немного прозрачным, а :after нет, задайте rgba

float:right- решает

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

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

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

Вот полностью готовый. Пришлось использовать impact, более похожего не нашел. Но скорее всего там при наведении еще и картинка менялась, потому что надпись "180 дней премиум аккаунта" в первой картинке, при наведении теряется https://jsfiddle.net/c2xg10af/2/