css3 преобразование перекоса с одной стороны

понимание, как создать эффект «CSS3 Transform One One Side» может быть полезен для различных проектов веб -дизайна. Тем не менее, важно отметить, что простое применение преобразования перекоса может не привести к желаемым результатам при использовании изображения для фона.

решение проблемы . Предоставленное решение с использованием твердых границ не достигнет этого эффекта эффективно.

для достижения желаемого эффекта, рассмотреть вопрос о использовании вложенного Div для изображения и применения значения SKEW, противоположного значению родительского Div. Например, если вы применили 20 -градусный перекоса к родительскому контейнеру, дайте вложенное (изображение) div значения -20 градусов. переполнение: скрыто; } #parallelogram { Ширина: 150px; высота: 100px; Полевая: 0 0 0 -20PX; Преобразование: перекосив (20deg); Фон: красный; переполнение: скрыто; позиция: относительно; } .изображение { Предпосылки: URL (http://placekitten.com/301/301); позиция: абсолютно; Верх: -30px; Слева: -30px; Справа: -30px; Внизу: -30px; Преобразование: перекосив (-20deg); }. Внутри него изображение будет размещено в вложенном дивизионном перекосе с -20 градусов, эффективно обращающим вспять перекос, применяемый к родительскому контейнеру и раскрывая прозрачную искаженную область за ним.