Изображение внутри параллелограмма

У меня есть несколько изображений, которые должны быть в форме параллелограмма следующим образом:

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

Какое свойство CSS используется для преобразования изображений в формы параллелограмма, как в приведенном выше примере?

Ответы

Ответ 1

Существует метод в преобразовании объектов перекоса. Единственное, что вам придется искать, это то, что все в div тоже будет искажать. Поэтому вы должны применить его дважды. Однажды, чтобы перекосить div на определенное количество градусов, а затем снова перекосить изображение внутри назад в противоположном направлении.

Например, если вы делаете это с div: transform: skewX(10deg);

Вам нужно сделать это на картинке: transform: skewX(-10deg);

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

Ответ 2

Поскольку я неправильно понял OP, я отредактирую ответ со скрипкой. Да skew полностью перекосит div, и это тоже исказит изображение. Так что просто "отрежьте" изображение с противоположным наклоном:

.wrapper {
  padding: 100px;
}
.skewed {
  width: 120px;
  height: 120px;
  -webkit-transform: skewX(-50deg);
  -ms-transform: skewX(-50deg);
  transform: skewX(-50deg);
  overflow: hidden;
  text-align: center;
  position: relative;
}
.skewed img {
  -webkit-transform: skewX(50deg);
  -ms-transform: skewX(50deg);
  transform: skewX(50deg);
  position: absolute;
  top: -87px;
  left: -90px;
}

<div class="wrapper">
  <div class="skewed">
    <img src="http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/03/car.jpg" alt="car" />
  </div>
</div>

Ответ 3

Вы можете достичь параллелограмма с изображением и поддерживать границы формы ссылки с помощью как минимум двух разных подходов:

Преобразования CSS

С одним div и псевдоэлементом. Изображение добавляется в качестве фона псевдоэлемента. Div перекошен, а псевдоэлемент не подвержен обработке:

a{
  display:block;
  position:relative;
  width:20%;
  padding-bottom:25%;
  transform-origin:0 100%;
  transform:skewX(-30deg) translatez(1px);
  overflow:hidden;
}
a:before{
  content:'';
  position:absolute;
  width:175%; height:100%;
  background-image:url('http://i.imgur.com/kreZqnx.jpg');
  background-size:cover;
  background-position:center;
  transform-origin:inherit;
  transform:skewX(30deg);
}

<a href="#"></a>