新規記事を追加した時に「NEW」の情報を斜め帯で表示する時に使用したtransform: rotate(315deg);周りの実装話です。
HTML
<div class="img"> <time datetime="2015-09-18"> <span class="hidden"> 09/18</span> <span class="new"> NEW</span> </time> </div>
※【Movable Type & jQuery】公開日が閲覧時より2週間前までの記事に「NEW」表示も参考にしてみてください。
CSS
.img { width: 216px; height: 146px; overflow: hidden; display: block; position: relative; } time { display: inline; } .new { width: 100px; padding: 3px 10px; background: #d43131; color: #fff; text-align: center; display: inline-block; position: absolute; top: 10px; left: -37px; text-transform: uppercase; transform: rotate(315deg); }
配置に重要なのは入れ子のdisplay設定です。(※CSS赤文字)
要素を斜めに傾けているのは
transform: rotate(315deg); の部分です。