css - 带有三 Angular 形边框的框阴影以创建人字形 div

Question

我正在尝试创建一组人字形 div，并看到这篇文章，其中丝带具有内部三 Angular 形。 http://css-tricks.com/snippets/css/ribbon/

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

不幸的是，当我尝试添加一个盒子阴影时，我最终在 div 周围得到了一个方形阴影，而不是三 Angular 形位周围的阴影。

关于如何实现这一点有什么建议吗？

Answer 1

我认为目前没有任何简单的解决方案来创建矩形和圆 Angular 矩形以外的形状的 CSS 阴影(使用 border-radius)。但我认为一种可能性(尽管更复杂)是将 CSS3 变换旋转与框阴影一起使用。你可以学习一些技巧here也许您可以根据自己的需要进行修改。