css - 使用 :before selectors. 的 3D 外观不可选择的文本

Question

在这里你可以看到我正在尝试做什么:http://jsfiddle.net/smogg/QFa4J/2/embedded/result/我一直在努力实现这种外观，现在这段代码可能真的很困惑。如果您有一些提示可以澄清这一点，请告诉我。这一切都是通过反复试验做出来的。

无论如何，这看起来不错。唯一的问题是我在 .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/