Как с помощью стилей добиться треугольных скосов в блоках?

Question

[ligisayan]

Приветствую! Подскажите плиз, как с помощью стилей добиться таких скосов в блоках как на картинках 1 и 2, причем текст может быть разной высоты - это возможно или только с помощью скрипта?

Answer 1

[SerzN1]

Это можно сделать jsfiddle.net/SerzN1/bpmqbzsp
Думаю не стоит объяснять, что 2ой вариант проще

В этом варианте есть конечно некоторые ограничения с фонами и максимальной шириной стрелки.

Если вам нужны стрелки на сложных фонах, то смотреть нужно сюда htmlbook.ru/blog/matritsa-preobrazovanii ( при таком раскладе height:100% сработает).
Эта фишка была активно использована на сайте sochi2014 (его прикрыли), там все блоки были "skew"

Главное если не упираться только в 1 элемент + псевдоэлементы , то это еще намного проще сделать.

Comments

[ligisayan]

SerzN1 супер! вы молодчик, фон однотонный, поэтому такой вариант еще как катит!

Answer 2

[Антон Нагаец]

Геометрические фигуры на CSS

Comments

[Сергей delphinpro]

Вы пробовали сделать резиновый треугольник таким методом? Видимо нет.

[ligisayan]

Сергей поддерживаю

Answer 3

[Кирилл]

псевдоэлементы используйте. В вашем случаи :after
Если не понятно, то вот пример - codepen.io/GoooodBoy/pen/dYKROB

UDP: Еще один вариант через clip-path: polygon. Получается резиново. Код на codepen обновлен.

Comments

[Сергей delphinpro]

фигня выходит codepen.io/anon/pen/ojyeXx

[Кирилл]

Сергей: Как я понял, это менюшка, так что можно сразу подогнать под нужный размер. Если бы это был блок с динамичным контентом, то мой вариант бы не подошел.

[Сергей delphinpro]

Кирилл: автор пишет
>> причем текст может быть разной высоты
:)

[Кирилл]

Сергей: Сорри) Тогда да) Как, вы и пишите ниже, вариант с двумя псевдоэлементами...хотя в этом случаи, я бы js решил проблему. как-то надежнее будет.

[Кирилл]

Сергей: и еще забыли про clip-path: polygon. похоже это будет самый оптимальный вариант, хотя и не такой кроссбраузерный.

[Сергей delphinpro]

Кирилл: Ну тут все зависит от требований кроссбраузерности. Мы их не знаем :)

[ligisayan]

Сергей Кирилл кроссбраузерность обязательна! притом ie9, так что clip-path: polygon мимо.

Answer 4

[inDeepCode]

графикой

Comments

[ligisayan]

inDeepCode что имеете ввиду? картинкой?

[inDeepCode]

да. мелкими картинками по краям (если нужно масштабирование) либо одной большой (если не нужно)