Как перекосить изображение с помощью CSS?

Я хочу исказить изображение, как это

введите здесь описание изображения

Это работает, когда я подаю заявку на div

введите здесь описание изображения

теперь я хочу использовать этот код для тега img, он не работает.

введите здесь описание изображения

Вот мой живой код:

https://jsfiddle.net/dbkvdq3u/5/

.steps-widget .step-img-box {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
}
.steps-widget .step-img-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  z-index: -1;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
.steps-widget .step-img-box:after {
  z-index: -1;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}
<div class="step-img-box">
  <img class="img-responsive" src="http://i.imgur.com/E7atspO.jpg" alt="Image">
</div>
<!-- end step-img-box -->


html jquery css transform skew
person The Hung    schedule 17.07.2015    source источник
comment
В чем вопрос?   -  person Tushar    schedule 17.07.2015
comment
jsfiddle.net/tusharj/dbkvdq3u/6 нравится это?   -  person Tushar    schedule 17.07.2015
comment
Ваше примерное изображение не выглядит перекошенным — похоже, что вокруг него была помещена белая маска.   -  person Rory McCrossan    schedule 17.07.2015
comment
Не уверен, что вы подразумеваете под div и т. д. img, но посмотрите на этот ответ. Тот же подход с перекосом без overflow:hidden для родителя должен работать для вас.   -  person Harry    schedule 17.07.2015
comment
Ваш код не соответствует действительности. Вы поставили асимметрию до и после блока, содержащего блок. Вы также должны указать свой код для своего изображения.   -  person Vinay    schedule 17.07.2015
comment
Извините, ребята, я обновил свой вопрос :)   -  person The Hung    schedule 17.07.2015
comment
@RoryMcCrossan Да, но я думаю, что могу заархивировать это с помощью CSS.   -  person The Hung    schedule 17.07.2015
comment
@TheHung: Используя skew, вы не можете добиться этого, используя один элемент img (потому что вы не можете перекосить половину в одном направлении, а половину в другом). Посмотрите ссылку, которую я дал в предыдущем комментарии. Это должно быть достаточно просто, чтобы адаптироваться к тегам img. Или вы можете взглянуть на clip-path SVG/CSS. Вероятно, это сработало бы для сплошного цвета, потому что вы добавили фоновый цвет к псевдоэлементам.   -  person Harry    schedule 17.07.2015

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете использовать псевдоэлементы, используя свойство положения фона, чтобы выровнять две «половины» изображения:

div {
  height: 300px;
  width: 300px;
  position: relative;
  margin: 100px auto;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background-size: 300px 300px;
}
div:before {
  transform: skewY(10deg);
}
div:after {
  left: 50%;
  background-position: -100% 0;
  transform: skewY(-10deg);
}
.sk:before, .sk:after{  background-image: url(http://lorempixel.com/300/300);}
.sk2:before, .sk2:after{  background-image: url(http://lorempixel.com/400/400);}
<div class="sk"></div>
<div class="sk2"></div>

person jbutler483    schedule 17.07.2015
comment
спасибо @jbutler483 отличный ответ. У меня есть небольшая проблема, если я хочу изменить фоновое изображение, поэтому я попытался добавить еще один класс с именем bg-1 и добавить к нему background-image, но это не работает. - person The Hung; 18.07.2015
comment
@TheHung Пожалуйста, посмотрите мое редактирование. Я использовал класс для добавления элементов :before и :after - person jbutler483; 18.07.2015
comment
@ jbutler483 Большое спасибо. Отличный ответ. - person The Hung; 20.07.2015