Создание сложных фигур с использованием CSS

Question

Я пытаюсь создать форму, похожую на трапецию, используя любое количество техник, чтобы это было как можно больше.форму, которую я пытаюсь создать, например, такую:

(внутри формы будет содержимое [imgs & txt])
возможные способы выполненияэто маскировка (webkit) и SVG-эффекты на html-контент (firefox).но я не могу найти способ заставить это работать с IE и оперой.Так что, если кто-нибудь сможет показать мне, как это сделать, это будет с благодарностью.

Answer 1

Есть несколько вариантов создания непрямоугольных фигур с помощью CSS, но все они - хаки. Это не то, что вы обычно ожидаете сделать с помощью CSS.

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

Другое CSS-решение, о котором я могу подумать, - это использовать экстремальный параметр border-radius для изменения формы прямоугольника. Это менее опасно, но не будет работать в IE8 и ниже, поэтому не соответствует вашим критериям.

Вы говорите, что пробовали подход SVG и отказались от него, потому что он не работает в IE8. Стоит отметить, что хотя IE не поддерживает SVG, он поддерживает VML, который является конкурирующим форматом векторной графики. SVG теперь стандартизирован, поэтому VML исчезнет, ​​но старые IE продолжат его поддерживать.

Поэтому решение, которое я выбрал бы, - это использовать SVG по умолчанию и VML вместо этого в IE7 / 8. Хорошей новостью является то, что есть несколько решений Javascript, которые облегчают эту задачу.

Один из них - Рафаэль , который позволяет рисовать изображения SVG / VML с использованием Javascript. Обычно используется для графиков в реальном времени и т. Д.

Существует также ряд решений, которые просто конвертируют SVG в VML. Например, http://code.google.com/p/svg2vml/. Но есть и несколько других доступных вариантов.

Надеюсь, это поможет.

Answer 2

Как вы предлагаете, маскировка и SVG - это путь. Они будут поддерживаться в будущих браузерах. Если вы должны быть обратно совместимы с IE, найдите в IE «фильтр» для CSS (google «т.е. фильтр»).

Будьте предупреждены: это очень не интуитивно понятно (по сравнению с CSS3) и, как правило, является стервой для работы. Если ваша цель состоит в том, чтобы сделать страницу похожей на версию CSS3, это будет сложно, и вам, вероятно, лучше использовать изображения.