簡単☆CSSでリボンをつくろう

今回作ったのは

new!

こんなかんじに右上にタグを書けるようなリボン。

最近イラレ開くのがめんどくさいから出来るだけCSSでなんでも作ってしまいたい。

リボンのCSSもたくさん配布されていたのだけど、あんまり気にいるのがなかったので自分でつくってみました。

htmlはこんなかんじ

<div class="ribbon-article">
  <div class="side-corner-tag">
    <div class="label">new!</div>
  </div>
</div>

CSSはこれ

適当に書いたので、いらない行とかあるかも。
CSS気づいたらめっちゃ強くなってて全然時代についていけてない(´ε｀；)

巻かれてるかんじの影？とかがついたらいいと思うのだけど、
CSSがながーくなるので今回はこんな感じで。