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

Question

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

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

Answer 1

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