Question

有人能告诉我哪种显示方式最好吗？

Answer 1

有多种方法可以做到这一点，您只需要评估每种方式的浏览器支持程度：

CSS Masks做得非常好：

但我认为他们可能拥有最差的浏览器支持。

我相信你也可以用SVG进行屏蔽，但无论如何都不支持SVG，并且它有一点学习曲线。

我可能采用的方式是使用transform: rotate();

.image-shape {
    height: 150px;
    background: url(http://imagz.inspiredmagz.netdna-cdn.com/wp-content/uploads/2013/05/3D-Illustrations-by-JR-Schmidt-08.jpg);
    position: relative;
}
.image-shape .point {
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    bottom: -25px;
    right: -25px;
    background: #777;
    overflow: hidden;
}
.image-shape .point img {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: -275px;
    left: -85px;
}

如果你有一个div与背景图像设置，然后另一个div旋转45度并定位在底部形成'点'。在这里你放置图像，向后旋转45度并将其定位为与第一个div的背景图像对齐。（定位它是一种痛苦，因为旋转，但只要这不需要扩展，一旦你这样做，它是很好的去。

通过在点div上设置overflow: hidden;，然后再在主容器div上再次设置图像的其他部分。

请参阅html以及css的其余内容：

http://jsfiddle.net/BszC3/

我使用这种方法的原因是因为旋转得到了相对较好的支持，并且可以在IE中使用其专有的过滤器实现：

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

缺点是这是一项相当多的工作，而且似乎完全是黑客攻击。

你最好的选择仍然只是像这样削减你的形象，而不是任何疯狂的CSS。

Answer 2

您可以使用html5画布：

http://jsfiddle.net/HDqE8/

没有html5的替代方案是使用遮罩图像（中间是透明部分的图像，具有您喜欢的形状，其余部分具有背景颜色）。然后你只需要重叠2个图像并将第一个放在顶部。图像也可以是svg。

在形状中显示图像的最佳方式

2 个答案: