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

「New」「新着」などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。

Creating CSS3 Image Ribbon Tags

[ad#ad-2]

• デモ
• 実装

デモ

元記事ではimg要素にリボンが添えられており、当方でdiv要素のパネルのデモを作成しました。

まずは、img要素の画像から。

デモページ：img要素

[ad#ad-2]

続いて、div要素のパネルです。

デモページ：div要素
※当方作成

実装

実装はimg要素もdiv要素もほぼ同じです。

HTML:img要素版

リボンのテキストはimg要素と並列に配置し、div要素で内包します。

<div class="side-corner-tag">
	<img src="1.jpg" alt="" />
	<p><span>newest</span></p>
</div>

CSS:img要素版

このエフェクトの要点はラッパーの「overflow: hidden;」と「padding: 5px;」です。そして、displayをinline-blockにする必要があります。

.side-corner-tag {
	position: relative;
	color: #fff;
	display: inline-block;
	padding: 5px;
	overflow: hidden;
	font-family: Arial, sans-serif;
	font-weight: 900;
} 

.side-corner-tag p {
	display: inline;	
}

リボンのp要素のスタイルです。
リボンの幅を指定し、斜めに傾け、シャドウをつけます。

.side-corner-tag p span {
	position: absolute;
	display: inline-block;
	right: -25px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
	text-align: center;
	text-transform: uppercase;
	top: 22px;
	background: #d93131;
	width: 100px;
	padding: 3px 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

最後に:before, :afterを使用して、リボンが立体的に見えるように三角形を作成します。

.side-corner-tag p:before {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: -17px;
	right: 69px;
	z-index: -1;
	border: 17px solid;
	border-color: transparent transparent #662121 transparent;
}

.side-corner-tag p:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 74px;
	z-index: -1;
	right: -10px;
	border: 17px solid;
	border-color: #662121 transparent transparent transparent;
}

ついでに、div要素版のコードも。

HTML:div要素版

l.2のimg要素がdiv要素に変わっただけです。
div要素内は空ですが、テキストでも画像でも何でも配置できます。

<div class="side-corner-tag">
	<div class="box"></div>
	<p><span>リボン</span></p>
</div>

CSS:div要素版

スタイルシートはdiv要素の定義とリボンのカラーを変更しただけです。
div要素の指定はサイズとカラーのみです。

.box{
	width:300px;
	height:270px;
	border:1px solid #dadada;
	background-color:#fff;
}