如何定位两个透明图像以重叠容器 div 的对角

Question

我从印刷图形设计师那里得到了这个 PSD 组合，但我不确定它是否可以在网络上使用。
请注意黑边圆角容器（如下图所示）已经存在。此页面上有多个 z-indexed div，因此很难确定哪个在堆叠顺序中具有优先级。

如您所见，我在左上角和右下角有两个灰色丝带（代表一个带有丝带和装饰品的盒子），以及两个图像（较小的蓝色框，即： :/From:) 在那些“丝带”下方但在容器顶部。容器的背景颜色是白色。左上角必须有透明背景，这样较小的蓝色框才能显示出来。有人能告诉我如何在这个圆角容器 div 上放置这些“倾斜的丝带”吗？或者如果这甚至可以使用 CSS 和 HTML 来完成。

Answer 1

最简单的答案是拥有两个<img>，并让它们都绝对定位。使用top:0px; left:0px 定位一个；一个是bottom:0px; and right:0px;。给它们一个高 z-index 以确保它们位于 div 的顶部。确保父 div 定义了 position: relative。