使用 :before 选择器实现 3D 外观。不可选择的文本

Question

在这里您可以看到我正在尝试执行的操作： http://jsfiddle.net/ smogg/QFa4J/2/嵌入/结果/ 我非常努力地试图实现这种外观，但现在这段代码可能真的很令人困惑。如果您有一些可以澄清这一点的提示，请告诉我。这一切都是通过反复试验而做出的。

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

@编辑： 我忘了这件事了。我无法使用 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/