使用CSS对角裁剪图像并添加边框

Question

我正在努力实现一种效果，我可以以下面显示的方式对角裁剪图像。我知道剪辑路径是一种解决方案，但它不适用于这种情况，因为某些浏览器不支持这个特定任务所必需的浏览器。 （IE和Edge）

此外，裁剪边缘需要黑色边框，这增加了我想要做的事情的复杂性。寻找答案并提出任何建议，任何建议将不胜感激。

Answer 1

也许你可以使用旋转元素（div或其他）覆盖图像，并给出边框和白色背景。如果您使用纯色背景，那么此解决方案就可以使用。

根据您的要求，另一种解决方案可能是简单地使用具有透明度的.png图像。

Answer 2

是的，你可以，让div的大小正确是有点棘手的。但这里通常是如何做到的：

HTML：

<div id="outerwrapper">
    <div id="innerwrapper">
        <div id="content">
            <span>asdf</span>
        </div>
    </div>
</div>

CSS：

#content {
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(-60deg);
    transform-origin: 50% 50%;
    position: relative;
}

#content span {
    position: relative;
    top: 30px;
    left: 30px;
}

#innerwrapper {
    border-right: solid 3px black;
    overflow: hidden;
    width: 100px;
    height: 100px;
}

#outerwrapper {
    transform: rotate(60deg);
    transform-origin: 50% 50%;
    width: 120px;
    height: 120px;
    overflow: hidden;
}

小提琴： https://jsfiddle.net/ywfpeve8/

解释一下： 你有一个div包含内容本身。在这个例子中，它只是一个跨度，但它可以是任何东西。 （我把它放进去看到最后一切都是水平的） 您可以将该内容div旋转到适合您的某种程度。

将div放在一个不同大小的包装中，您可以在其中放置内容。该div有一个overflow: hidden，用于裁剪内部包装盒之外的所有内容。然后，该包装器还具有您希望突出显示裁剪的边框。

该内包装器放置在外部包装器中，该包装器在内容div处旋转相同的量，但向后，使您保持内容的原始0度对齐。这个div再次有overflow: hidden来再次裁剪内包装 ，这样你就可以隐藏你想要隐藏的其他“裁剪边缘”。在我的示例代码中，我没有达到正确的尺寸和位置，因为它需要一点时间才能正确。但是如果你有一个白色背景的图像，那就不再那么难以把事情搞定了。

奖励：顶级元素的背景（包含outerwrapper的元素可以有任何背景，你不会在右下角看到一个矩形框（对于这个例子）as所有事情都发生在overflow: hidden并且没有任何条形图覆盖内容以隐藏它：）