Как сверстать такой блок с наклоном сверху и снизу?

Question

[Heorhii]

Нужно примерно такое как на скрине, через SkewY() делал такое же но только внизу дива, только с верхом у меня не получилось. А нужен наклон и сверху и снизу, может с помощью псевдоэлементов как-то? Поделитесь опытом..

Answer 1

[Александр Талалаев]

Первое что приходит в голову, если делать псевдоэлементами, это сделать примерно так.
Уровень наклона в данном случае определяем по высоте катета треугольника скоса.
Это техника создания треугольников, частенько бывает удобной, особенно если не нужно чтобы были искажения элемента. Семантика не нарушается, так как это элементы оформления.

Comments

[Heorhii]

Немного не то ибо от высоты и ширины блока зависит

[Александр Талалаев]

Георгий Городенко: а, у тебя блок с плавающей шириной? тогда видимо нужно идти в сторону svg

Answer 2

[Ivan Bogachev]

Можно сделать с помощью псевдоэлементов вот таким образом. Пропорции треугольников не меняются при изменении размера экрана так как и ширина и высота их зависят от vw, положение их определяется через calc для того, чтобы в хроме (и возможно еще где-то) не было проблем с мерцающим зазором в 1px.