На чем реализовать параллелограмм
 

Привет, на чем реализовать параллелограмм? css отпадает, так как проблемы с кроссбраузерностью

обычное состояние

при наведении

soltx,
использовать графику, другого варианта нет, если уж CSS совсем нельзя.

soltx,
рони тут демонстрировал фишку "Косые края" (что-то про ленточку в браузере) с помощью широких бордеров, Думаю будет кроссбраузерно. Поищите по его сообщениям

Какой ужас у 1% пользователей будет прямоугольник вместо параллелограмма.

Deff, рони? https://css-tricks.com/examples/ShapesOfCSS/ кивордс css shapes

вот пример: border нужно сгладить, подобные манипуляции типа backface-visibility: hidden; загубят качество изображения есть ещё подводные камни, так что это не 1%, а все 99%

вот результат на css
проблемы с потерей качества изображения в chrome, opera в safari не смотрел, буду признателен если кто отпишет как там дела

если удалить свойство backface-visibility: hidden; проблема с потерей исчезнет, но появиться новая проблема: у границы будут не сглаженные края (зубчики)

может у кого получиться решить проблему в css, поделитесь кодом

soltx,
Мон наложить поверх первого бордера второй с z-index:2 с полупрозрачным цветом rgba() , возможно сдвинуть на пиксел

Зачем саму картинку-то скукоживать? Плющат, таращат и скукоживают картинки только недобитые пролетарием колхозники.

В качестве иллюстрации функция вычисления ширины основания параллелограмма. Из скрипта для ФШ

/*
@param bounds array габариты объекта
@param radius float юзер задает радиус скругления от 0 (нет) до любого
@param angle float юзер задает угол наклона - скоса от 0 (нет) до +любого (вправо) или -любого (влево)
return side float ширина основания
*/
function calcSkew(bounds, radius, angle) {
	var R = radius,
		A = Math.PI * (Math.abs(angle)/180),
		H = bounds[3] - bounds[1]; // height,
		hyp = R / Math.cos(A),
		leg = hyp * Math.sin(A),
		side = (H * Math.tan(A) - leg + R - hyp)/2;
	return side;
}

Скрипт описывает скругленный параллелограмм внутри габаритных размеров слоя (картинки), а не скукоживает саму картинку, которая как есть просто маскируется векторной маской со всеми радиусами и наклонами и отступами.

Я к тому что если захотите автоматически рассчитывать параметры для стиля, вам эта функция пригодится. В терминах css маскирование это overflow:hidden контейнера картинки.

ЗЫ Кто алгебру читал дальше предисловия, может упростить вычисления. У меня мощности не хватило.