コーナーリボンをCSSのみで作ってみた

ブログやWebサイトでよく「New」とか「PickUp!」とかに使われているコーナーリボンを、CSSのみで作ってみました。

こんな感じ

ネストが使いたかったのでSCSSで作りましたが、SCSSタブの「VIEW COMPILED」を押せばコンパイル済みのCSSも閲覧できます。

See the Pen ygGgYY by Kuzlog (@Kuzlog) on CodePen.

制作時間は約2時間…無駄に4隅全部作っちゃいました。

ちなみに、折り返し部分を作らないならコード量は半分くらいで済みます（半ギレ）。

あとがき

display:flexやtransform:rotate()を使っているので、ブラウザの対応状況は正直微妙です。位置もpx単位で無理矢理調整してるので、ブラウザによってはズレて見えるかもしれません。

CSSで作ると色やサイズの変更は楽なんですが、~IE9の対応を考えるなら、やはりコーナー用の画像作って上に重ねるのが確実ですね…