Многоформированные слои CSS не прямоугольные CSS слой

Question

Можно ли сделать слои CSS в форме как следующее изображение ...

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

Примечание. «Формы, подобные этим, я имею в виду не только эти три примера, но и формы, которые я мог определить»

Answer 1

Если вам нужны фигуры в HTML, то вам нужно встроить или генерировать SVGS. Вы можете взглянуть на Raphaël..

Нормальный HTML и CSS просто отображают прямоугольники.

Answer 2

Нет прямого способа манипулировать форму элемента DOM - все элементы либо прямоугольные (если они display:block;) или сформирован их текстовым контентом (если они display:inline;).

HTML DOM вращается вокруг прямоугольных ящиков, поэтому вы не собираетесь получать случайные коробки в форме в форме.

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

Canvas - это технология HTML5, которая в основном дает вам рисунок в браузере, на котором вы можете нарисовать с помощью JavaScript. Это позволяет создавать и анимировать 2D пиксельное искусство.

SVG и VML - векторные графические языки. Они выполняют примерно ту же задачу, но VML специфично для Internet Explorer, в то время как большинство других браузеров поддерживают SVG. (IE9 также поддержит SVG, но это еще не в широком использовании). Опять же, вы можете работать с этим, используя JavaScript, и лучший способ сделать это в кросс-браузере - использовать Raphael libraray, что дает вам API для создания вашей графики, а затем переводит его в VML или SVG за кулисами в соответствии с браузером.

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

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

Один вариант может быть преобразования CSS: это позволяет вращать / перестроить / etc коробку. Боковые стороны - это то, что коробка остается в форме коробки (поэтому нет полигонов), а содержимое вращаются и перекошены, а также наброски коробки, поэтому может не соответствовать тому, что вы пытаетесь сделать. Кроме того, он может не работать на всех браузерах, хотя можно сделать для работы в большинстве случаев.

Можно создавать ящики с поддельными диагональными краями, потрясенные по границам стилями. Видеть http://www.cssplay.co.uk/menu/tree.html. Для хорошего примера. Но опять же, это не идеально.

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

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

Answer 3

CSS - это язык для стилейки документов, не давая им семантической структуры. Ergo, нечто известно как «слой CSS» или «форма CSS». Объекты в ваших документах HTML, включая Divs, которые иногда ошибочно называют «слоями», могут быть даны индексы ли они отображаются перед другими объектами, давая иллюзию «слоев».

И нет, нет объектов в и общих HTML-документов, которые могут иметь произвольные формы. Иногда вы можете взломать стандартные фигуры коробки, чтобы сделать творческие вещи, объединяя множество малоизвестных форм, таких как сделано с Ланты Хак.

Что вы можете искать, это что-то вроде нового холст элемент В HTML5 и других векторных графических решениях, таких как SVG, которые привели к нему.

Answer 4

Вы можете сделать первую форму (тип параллелограммы) в последних сафари, Chrome, Firefox и Opera через CSS-преобразования:

• http://webkit.org/blog/130/css-transforms/
• https://developer.mozilla.org/en/css/using_css_transforms.
• (www.opera.com находится в данный момент, но вы хотите http://www.opera.com/docs/specs/presto26/css/transforms/)
• http://hacks.mozilla.org/2009/06/3dtransforms-isocube/

Помимо этого, нет. CSS - это все о прямоугольниках.