ブログや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の対応を考えるなら、やはりコーナー用の画像作って上に重ねるのが確実ですね…