<div>带有倾斜的边缘和矩形阴影

Question

如何在HTML和CSS中创建以下模型？

我尝试添加分隔<div>符以transform: rotate();使用没有运气的情况创建倾斜的边缘。

我要实现的主要是：

• <div>有内容的两个要素
• 这两个<div>元素具有倾斜的边缘和阴影

Answer 1

该skew转换可以创建斜坡，但不幸的是它应用于整个DIV，不只是一个它的边缘。您可以使用重叠或嵌套的div在同一个盒子上混合直线边缘和倾斜边缘-但是，这会使阴影有些问题（请参阅http://jsfiddle.net/z9am39sp/）。

另一个缺点是，使用这种特殊的设置，您无法使文本适合偏斜的形状。

不过，它可能已经足够接近您的目的。你的来电。