平行四边形内的图像

Question

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

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

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

Answer 1

由于我误解了 OP，我将使用 fiddle 编辑答案。是的，skew 会完全扭曲 div，这也会扭曲图像。所以只有 'deskew' 具有相反倾斜的图像：

.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 2

变换中有一种方法可以使对象倾斜。您唯一需要注意的是 div 中的所有内容也会倾斜。所以你必须申请两次。一次将 div 倾斜一定度数，然后再次将内部图片向相反方向倾斜。

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

您必须对图片执行此操作： transform: skewX(-10deg);

这里有一个 link 可以阅读更多关于 transform 的内容 - 因为还有更多内容。

Answer 3

您可以使用图像获得 平行四边形 并使用至少 2 种不同的方法保持 link 形状的边界：

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>

请注意，您需要将供应商前缀添加到 transform 和 transform origin 属性以支持浏览器（有关 canIuse 的更多信息）。

内联 SVG

此方法使用 polygon element for the parallelogram shape and a 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>

平行四边形内的图像

Image inside a parallelogram

css

svg

css-transforms

css-shapes

CSS 变换

内联 SVG