Как сделать при помощи css3 border под углом?

Question

[NoMoneyException]

Привет. помогите пожалуйста по 2м вопросам:
1: как сделать правый border скошенным при помощи css3. У меня есть идея только использовать фоновую картинку, но кажется так делать нельзя по заданию
2: как сделать, чтобы весь header был как на пикче, как бы возвышался над main-частью. Использовать z-index?

Answer 1

[iBird Rose]

1) задний блок - обычный белый фон и черный border.
2) london отдельным блоком display: inline-block и черный фон
3) делаешь для london :after и делаешь черный треугольник через border (https://habrahabr.ru/post/126207/)
как то так: https://jsfiddle.net/qh4sd2bq/

Comments

[NoMoneyException]

Благодарствую, буду разбираться)

[NoMoneyException]

а можно еще вопрос пожалуйста, как 2 этих элемента совместить в 1, например если я хочу при наведении подсветить их?

[iBird Rose]

NoMoneyException: никак. придется hover вешать через js. https://jsfiddle.net/qh4sd2bq/1/

[Kovalsky]

NoMoneyException: https://jsfiddle.net/lucifer63/qh4sd2bq/2/

[iBird Rose]

Никита Полевой: а че так можно было? xD ну ладно)