在html css中实现不规则的矩形图像遮罩

Question

是否可以在HTML5和CSS3中实现这样的效果，请找到附件图像

这里我有两个带溢出的div：hidden，里面各有一个图像。当我将鼠标悬停在每个图像上时，图像会放大或向上或向下移动到同一个div容器中。所以基本上div就像是大图像的掩码一样。

我在这里未能实现的是用于遮盖图像的div的形状。有没有办法实现这一点，并可以在几乎所有浏览器的最新版本中工作？

谢谢你的帮助！

Answer 1

对于类似的东西，我建议两种不同的可能性：

• 使用CSS转换（特别是skewY）;或
• 使用SVG（只有一些polygons）

他们每个人都有一些好/坏的东西，可以在所有现代浏览器和移动设备上使用，你可以在caniuse.com网站上看到transform和SVG。

使用CSS 2D转换

你会有一个容器div，它会垂直倾斜，然后在其中{（1}} s内部，并修正了倾斜（过度）。然后隐藏溢出，以便不显示包含div的多余内容。

您可以在这里（或JSFiddle）看到演示：

div

#skewed {
    position:relative;
    margin-top:20px;
	width: 500px;
	height: 300px;
    transform: skewY(-2deg);
	-webkit-transform: skewY(-2deg);
	-moz-transform: skewY(-2deg);
	-o-transform: skewY(-2deg);
    overflow:hidden;
    background:black;
    -webkit-backface-visibility: hidden;
}

#skewed div {
    position:absolute;
    height:200px;
    width:500px;
    transform: skewY(4deg);
    -webkit-transform: skewY(4deg);
	-moz-transform: skewY(4deg);
	-o-transform: skewY(4deg);
    overflow:hidden;
    opacity:0.4;
    transition:all 0.5s;
    z-index:1;
    background-size:100% 100%;
    -webkit-backface-visibility: hidden;
}

#skewed div:hover {
    opacity:1;
    z-index:2;
    background-size:110% 110%;
}

#top {
    top:-50px;
    left:0;
    background:url(http://lorempixel.com/1000/400/animals) no-repeat center center;
}

#bottom {
    top:150px;
    left:0;
    background:url(http://lorempixel.com/1000/400/people) no-repeat center center;
}

关于此解决方案：

• 所有主流浏览器（Opera Mini除外）均支持，但您需要使用前缀。
• 易于实施和扩展其他内容（文字，链接等）
• 在Chrome中，边缘看起来太尖锐。虽然可以使用<div id="skewed"> <div id="top"></div> <div id="bottom"></div> </div>作为suggested by Neven in this answer修复此问题。

使用SVG

使用-webkit-backface-visibility: hidden来定义您要创建的基本形状。

我不是SVG专家，所以我不能做任何花哨的事，但这是为了得到一个大概。这是一个简单的演示（您也可以在此JSFiddle上看到它）：

polygon

polygon {
    opacity:0.4;
    transition:all 0.5s;
}

polygon:hover {
    opacity:1;
}

关于此解决方案：

• 所有主流浏览器支持（不需要前缀或任何内容）
• 高度可定制：我使用了多边形，但您可以使用路径和曲线来提供更个性化的解决方案。
• SVG并不像其他解决方案那么容易（好的，这很简单，但是更复杂的东西需要一些学习）。