【CSS】装飾の斜め帯をCSS3で実装

新規記事を追加した時に「NEW」の情報を斜め帯で表示する時に使用したtransform: rotate(315deg);周りの実装話です。
「なびぺっと(http://www.navi-pet.com/)」キャプチャ

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); の部分です。

参考:[CSS]画像やパネルに斜めにしたリボンを重ねるスタイルシート

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください