使用3D选择器：选择器之前。不可选文本

Question

在这里，你可以看到我想要做的事情：http://jsfiddle.net/smogg/QFa4J/2/embedded/result/ 我试图实现这个看起来很难，现在这个代码可能会很混乱。如果您有一些可能会澄清的提示，请告诉我。这一切都是通过试验和错误。

无论如何，这看起来不错。唯一的问题是我的文本.article内部是不可选择的。 .article:before内部的边界导致此问题。我该如何解决这个问题？或者，也许我应该采取一些不同的步骤来实现这种外观（现在，我的解决方案，我必须定义有问题的物品的高度）。

@edit： 我忘了这件事。我不能使用z-index因为我的#main有阴影（它不包括在jsFiddle中以阐明代码），然后阴影显示在边界之上。如果我使用没有:before的边框，那么我的#main会变宽，这不是我想要的。

Answer 1

有更干净和更简单的方法来做到这一点。请享用！

http://www.css3d.net/ribbon-generator/

http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/

http://www.webresourcesdepot.com/creating-nice-3d-ribbons-with-pure-css3/