Как сверстать такой блок?

Question

[pet1987]

Нужно сверстать такую шапку и меню для сайта(см. скриншот).
Не знаю как сверстать такие линии, которые отмечены на скрине. Думаю это делать нужно через CSS свойство border, но точно не знаю.
Подскажите пожалуйста.

Comments

[Анатолий]

SVG? PNG c линиями и прозрачным фоном?

[Froggyweb]

по идее стоимость верстки этого блока должна превышать стоимость дизайна всего сайта.

Answer 1

[OTCOcity]

Можно нарисовать прямоугольник под меню с
border: 1px solid #fff;
и использовать свойство для искажения
transform: skew(-30deg, 0deg);
А менюшку выводить над ним

Answer 2

[Ankhena]

https://jsfiddle.net/e14x0pvy/
Либо SVG

.d1 {
  background: linear-gradient(to left top, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px));
}

.d2 {
  border-bottom: 1px solid red;
  transform: rotate(-30deg);
}

.d3 {
  border-bottom: 1px solid red;
  transform: skew(0, -30deg);
}

Comments

[Ankhena]

Но вообще дизайн выглядит странно.

Answer 3

[Troodi Larson]

Я думаю можно посмотреть как это делается прямо из кода элемента.