平行四边形内的图像

Question

我有多张图像需要像这样的平行四边形：

它们应该包含在div元素中，旋转木马中并链接到视频页面。但是，由于透明区域，使用常规图像会导致链接出现边界框问题。

使用哪个CSS属性将图像转换为平行四边形形状，如上例所示？

Answer 1

对于倾斜对象，有一种变换方法。你唯一需要注意的是div中的所有内容也会产生偏差。所以你必须应用它两次。一旦将div倾斜一定数量的度数，然后再将图像向内倾斜反向。

例如，如果您对div执行此操作： transform: skewX(10deg);

你必须这样做： transform: skewX(-10deg);

这是一个链接，可以阅读更多关于transform的内容 - 因为还有更多内容可以满足您的需求。

Answer 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>

Answer 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>

请注意，您需要在转换中添加供应商前缀并转换原始属性以获得浏览器支持（有关canIuse的更多信息）。

内联SVG

此appraoch使用polygon element作为平行四边形的形状，使用pattern element使用图像填充形状：

svg{display:block;width:30%;height:auto;}

<svg viewbox="0 0 10 10">
  <pattern id="image" width="10" height="10" patternUnits="userSpaceOnUse">
    <image xlink:href="http://i.imgur.com/kreZqnx.jpg" x="-1" y="-1" height="12" width="12" />
  </pattern>
  <a xlink:href="#">
    <polygon points="0 10 4 0 10 0 6 10" fill="url(#image)" />
  </a>
</svg>