Верстка скошенных краев или "Вам виски прямые или косые?"

[k0d]

Я, вообще, не люблю задавать подобные вопросы, но без постороннего совета мне обойтись.

Есть такое меню в макете:

Вообще, подобные вещи делают через свойство border и разные изыски с шириной этой границы. У меня даже получилось заверстать такую штуку, правда у нее был постоянный цвет фона.

Но тут градиент.

В связи с этим вопрос, если бы вы были на моем месте, то как бы сделали такую штуку.

 

[hypnocolor]

Можно по-разному. Например, вот так: http://jsfiddle.net/hypnocolor/0d5xj67y/

[k0d]

Ну да, я о CSS Transforms(кажется так эта спецификация-рекомендация называется) тоже думал. Но, согласитесь, это же совсем другой подход, в отличии от изысков с border. А можно ли изменить вот это на градиенты:

http://jsfiddle.net/uLwLbwkz/

[hypnocolor]

Ну да, я о CSS Transforms(кажется так эта спецификация-рекомендация называется) тоже думал. Но, согласитесь, это же совсем другой подход, в отличии от изысков с border. А можно ли изменить вот это на градиенты:

http://jsfiddle.net/uLwLbwkz/

 

Можно было бы через border-image и градиенты для бордера, но они не работают, если у блока указана нулевая высота и ширина, которые необходимы для такого бордерного треугольника. Кроме того, трансформы более кроссбраузерны. Поэтому тут дело не в том, что подход другой, а в том, что он выполняет поставленную задачу.

[k0d]

А разве трансформы это не новомодная штучка вроде CSS Transition? Или для нормальных людей это уже норма жизни, вроде свойства background, и не надо оглядываться на то, что она есть только в 1-2 браузерах из всего зоопарка. Простите, я не слежу за новостями...

[hypnocolor]

Что-то, похоже, очень давно не следите Background работает со времён IE6, если не раньше. По трансформам всё хорошо с поддержкой, можно вполне пользоваться: http://caniuse.com/#search=transform. Собственно, как и транзишнами.

[Николя223]

делайте через transform. если вдруг захотите поддержку древних ослов - можете вот этим пройтись до кучи http://louisremi.github.io/jquery.transform.js/