Layout 将一个div剪切成2个背景图像，然后在顶部使用CSS3分层渐变

我希望能够创建一行div，如下所示：

\---------\---------\---------\
 \         \         \         \
 /         /         /         /
/---------/---------/---------/

唯一的问题是，每个div都有一个百分比的宽度，而不是绝对值。 我想能够创建一个DIV像上面使用两个图像

\---+
 \  |
 /  |
/---+

而且

+--\
|   \
|   /
+--/

…其中第一个图像与DIV的左侧对齐，第二个图像与右侧对齐。然后，在这上面，我想加一个梯度，从西北方向到东南方向

我想尽量避免创建一个内部有3个单独DIV的DIV，每个DIV对应于图像的每一部分，因为我认为CSS3正在进化以停止这个确切的原因，就像过去给一个DIV一个内部有9个DIV的网格只是为了添加一个漂亮的外部阴影

不管怎样，有人知道我怎么做吗？我意识到有背景分层这样的东西，所以我想这是一个开始

---

提前感谢：

您是在找这样的东西吗

---

我在一个Div[左右和中间]中提到了3个背景。

使用3个图像而不是2个图像可能更简单：一个用于容器的左侧，一个用于容器的右侧，一个用于两个中间边框。将有左、右和中边框图像

---

每列将有一个单独的bg图像左，中，中，分别与背景位置：左上；外部容器将有一个背景位置为右上角的bg图像

看看：before和：after伪类。IIRC对它们的支持非常好。我忘了提到，我看过它们，它们似乎只能真正添加内容，而不是并排div。如果你设置内容：，那么你可以给它们一个宽度和高度，一个背景图像，或者渐变。似乎你不能为内容设置一个空字符串：你可以，但是你必须设置一个宽度和高度来覆盖auto的默认值，这不会给它任何尺寸。使用多个bg图像，这是IE8或更早版本不支持的。这是我想要的东西，我只对HTML5技术感兴趣，如果他们想查看web应用，他们将不得不升级他们的浏览器。我的问题现在集中在像上面那样定位div，其中div相互重叠。