使用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/