要素の両面にcss3リボンを得る方法

Question

CSSリボンの作成方法については、tutorialに従っています。しかしながら、最終的な結果は、所与の要素の一方の側にのみリボンを示す。私は疑問に思っています：チュートリアルのコードを与えれば、それが両側に現れるようにする方法はありますか？たぶん私は:beforeと:afterの意味で混乱しています。両方の側に<div>を追加して両方をターゲットにする必要がありますか？

Answer 1

要素ごとに1つの:beforeと:after疑似要素を持つことができます。したがって、反対の特性を持つ別のラッパーとスタイルを追加する必要があります。あなたが参照したチュートリアルに基づいて、hereを1つまとめました。

より良い疑似要素を理解するには、viewing a previous answer of mineが役に立ちます。