带有三角形边框的框阴影以创建人字形 div

Question

我正在尝试创建一组 V 形 div，并在这篇文章中发现功能区具有内部三角形形状。 http://css-tricks.com/snippets/css/ribbon/

我试图添加一个跟随三角形的外部边框，这将实现我正在寻找的效果，而无需使用图像。

不幸的是，当我尝试添加 box-shadow 时，我最终在 div 周围出现了一个方形阴影，而不是三角形位周围的阴影。

关于如何实现这一点的任何建议？

Answer 1

我认为目前除了矩形和圆角矩形（使用border-radius）之外，没有任何简单的解决方案可以创建形状的 CSS 阴影。但我认为一种可能性（尽管更复杂）是使用 CSS3 变换旋转和盒子阴影。您可以学习一些技术here，也许您可​​以根据自己的需要进行修改。