这样的事情在 CSS 中甚至可能吗？ [关闭]答案

【问题标题】：Is something like this even possible in CSS? [closed]这样的事情在 CSS 中甚至可能吗？ [关闭]
【发布时间】：2014-11-21 04:34:24
【问题描述】：

这样可以让2张图片重叠吗？

想象一下，您有 2 张图像，两者都占结果图像的 60%。它们应该重叠，但有一个对角线切口。

【问题讨论】：

谢谢@Banana！刚刚发表了一个悲观的评论。看到你的就删了:)
变换旋转+溢出隐藏+z-index
是的。查看transform:rotate 和overflow:hidden 以开始使用。
SVG 是一个选项吗？
This 正是您所需要的

标签： css css-shapes

【解决方案1】：

要么使用 CSS Masking，要么使用 CSS3 变换旋转：

-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);

您可以将一个内部容器旋转 45 度，然后将该容器内的图像旋转 -45 度以使其再次变直。结果是对角线边框。添加 z-index 和绝对定位，您就得到了结果。

这是一个演示。

.container {
    width: 500px;
    height: 200px;
    margin: 50px;
    overflow:hidden;
    position: relative;
    border: 2px solid #666;
}
.img1 {
    border-right: 2px solid #666;
    position: absolute;
    width: 300px;
    height: 600px;
    overflow: hidden;
    left: -75px;
    top: -230px;
    z-index: 2;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}
.img1 img {
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}
.img2 {
    position: absolute;
    width: 350px;
    overflow: hidden;
    left: 150px;
    z-index: 1;
}

<div class="container">
    <div class="img1"><img src="http://lorempixel.com/output/city-q-c-600-300-7.jpg" /></div>
    <div class="img2"><img src="http://lorempixel.com/output/city-q-c-600-300-10.jpg" /></div>
</div>

【讨论】：