Как делать такие фигуры в браузерах с отсутствием поддержки clip-path?

Question

[Happy-Child]

Как делать такие фигуры (кнопка и карточки с картинками) без использования clip-path?
Возможно ли сделать такую фигуру в ie10+, и в браузерах не поддерживающих clip-path?

Comments

[Rustam Bainazarov]

IE10? А может пользователи этого 8-летнего динозавра просто будут видеть обычные прямоугольники?

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

Делайте через @supports вырезку. Прогрессивное улучшение.

Ну либо геморрой с SVG-маской вас ждёт и её подстройкой.

[Happy-Child]

Рустам Байназаров, К сожалению нет.

[Rustam Bainazarov]

Happy-Child, что нет? Ну если нет — SVG-маска вам в помощь. Она не адаптивна, это нужно учитывать.

Можете ещё свойство clip задействовать, но тогда фон нужно будет на отдельный блок вешать + position: absolute.

[Happy-Child]

Рустам Байназаров, Не увидел весь комментарий, нет имел ввиду про обычные прямоугольники. За svg спасибо, попробую.

[Rustam Bainazarov]

Happy-Child, глупо следовать желаниям заказчиков. Браузеры разные, способности оных — разные.

Вы — технический специалист и должны понимать, что сделать можно, а что нет. Вы потратите несколько часов на решение вопроса, которое непринципиально. Оно не повлияет на продажи даже на 0.0001%. А в итоге вы провозитесь над этим, получите костыль и велосипед, который никому не нужен.

Вместо того, чтобы сделать нормально для 95% браузеров через clip-path. А для тех, кто не поддерживает, — простые прямоугольники без фигурной обрезки.

Если скажете, что заказчик против — ничего не могу сказать. Не знаю, может, это у меня всегда получалось доносить такие вещи до заказчика, поэтому у меня не было проблемы с тем, чтобы отстоять своё мнение, если оно верное.

[Rustam Bainazarov]

Brad9aga, ты с IE10 не работал, видимо.

[Happy-Child]

Рустам Байназаров, Вот это да, самое правильное решение) Будем думать. Спасибо.

[Rustam Bainazarov]

Happy-Child, можете вот таким хаком на transform сделать:



Только надо доработать и убрать лишнее, но идея понятна.

[Brad9aga]

Рустам Байназаров,я их недобраузер в гробу видал

[Rustam Bainazarov]

Brad9aga, да я тоже, но иногда нужно и под него делать.

[Brad9aga]

Рустам Байназаров, смотрю не хреново воплощаешь мои идеи)

[Rustam Bainazarov]

Brad9aga, да это старая же тема костылей.

[Brad9aga]

Рустам Байназаров, знаешь как лучше всего сделать ? влепить заглушку.

[RAX7]

Happy-Child, вот тебе вариант на SVG
https://jsfiddle.net/RAX7/6sb7k3uq/

<polygon points="
  0 0
  1 0
  0.9 0.95
  0 0.75"/>

тоже самое, что и clip-path: polygon(0% 0%, 100% 0%, 90% 95%, 0% 75%);

[Rustam Bainazarov]

Brad9aga, заглушка — это моя жизнь.

[Brad9aga]

Рустам Байназаров, а что бы мозги не делать просто прямоугольники(квадраты) для ие выводить да и делов

[Rustam Bainazarov]

Brad9aga, ну как я выше и написал в самом первом сообщении :))