読者です 読者をやめる 読者になる 読者になる

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

CSS Web関連

今回作ったのは



new!

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


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

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

コード

htmlはこんなかんじ

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

CSSはこれ

感想

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

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