смещение блоков css

Привет. Наверное мы об этом онлайновом конструкторе полигонов говорили:

Согласен. А вот свойства foreground мне не хватает(чтобы поверх png-шку наложить), часто приходится использовать дивы и z-index.

Использование найдётся точно. Мы не привыкли думать в плоскости HTML+CSS дальше прямых углов, нам сложно и для тех кто может появится возможность это использовать.

В настоящий момент реализация такой вещи не тривиальная (по крайней мере в том что мы видели) и не даёт предсказуемости поведения. Спецификация должна решать эти недостатки.

Я понял о каком конструкторе полигонов идёт речь.

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

Сдвиг стороны (два угла одновременно): skew: left center 10px;

skew: <'skew-point'> && <'skew-length'>

Начальное значение: 0

Начальное значение: center center

skew-point: [left|center|right] || [top|center|bottom]

По горизонтали содержимое блока не выходит за ограничения установленным свойством width этого блока или рамок установленных родительским блоком, область содержимого ограничивается соответственно отступам (Рис. 1.), исключая overflow переопределение.

По вертикали блок увеличивает/уменьшает свою высоту соответственно блочной модели css.

Поведение блока при изменении размера:

Знак сдвига соответствует прямолинейной прямоугольной (декартовой) системе координат (Рис. 1.).

Смещение задаётся в процентах от ширины соответствующей стороны или в фиксированных единицах.

Одно свойство применяется к одной стороне или углу, противоположная сторона наследует своё состояние (положение).

Свойство skew сдвигает один указанный угол или сторону блока по горизонтали или вертикали на установленное смещение. Сдвиг стороны сдвигает оба угла этой стороны, образуя параллелограмм. Текст и внутренние элементы сохраняют своё положения (в отличии от свойства ) и не искажаются соответственно преобразованиям блока.

Есть идея к добавлению в спецификацию CSS.

Сдвиг блока / Хабрахабр