HTML – 带有倾斜的边缘和盒子阴影

概述如何在 HTML和CSS中创建以下模型？ 我尝试添加一个单独的< div>使用transform：rotate();创建倾斜边缘没有运气. 主要是,我想要实现的目标是： >两个< div>内容元素 >两个< div>元素有倾斜的边缘和阴影 偏斜变换可以创建斜率,但不幸的是它适用于整个div,而不仅仅是它的一个边缘.您可以使用重叠或嵌套的div在同一个框上混合直边和倾斜边 – 但是,这会使阴影有点问 如何在 HTML和CSS中创建以下模型？

我尝试添加一个单独的< div>使用transform：rotate();创建倾斜边缘没有运气.

主要是,我想要实现的目标是：

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

解决方法 偏斜变换可以创建斜率,但不幸的是它适用于整个div,而不仅仅是它的一个边缘.您可以使用重叠或嵌套的div在同一个框上混合直边和倾斜边 – 但是,这会使阴影有点问题(参见 http://jsfiddle.net/z9am39sp/).

另一个缺点是,使用此特定设置,您无法使文本适合倾斜的形状.

尽管如此,它可能足够接近您的目的.你的来电.

总结

以上是内存溢出为你收集整理的HTML – 带有倾斜的边缘和盒子阴影全部内容，希望文章能够帮你解决HTML – 带有倾斜的边缘和盒子阴影所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。