CSSで画像にリボン装飾をする方法

ベクターデータなどで見かけるような「リボン」を、「NEW」などのアイコン的要素で画像にひっかけて表示しているサイトなどがあります。一般的にpng画像などで画像を作成し、position属性で絶対配置にして画像の全面に配置するような指定の仕方をすることが多いかもしれませんが、今回はCSSのみでそれを実現する方法をご紹介します。

それでは、サンプルを見ながら確認していきましょう。

DEMO

HTMLを記述

<div class="box box-sub1">
	<img src="images/morning.jpg" alt="モーニング"/>
	<p><span>morning</span></p>
</div>
<div class="box box-sub2">
	<img src="images/lunch.jpg" alt="ランチ"/>
	<p><span>lunch</span></p>
</div>
<div class="box box-sub3">
	<img src="images/cafe.jpg" alt="カフェ" />
	<p><span>cafe</span></p>
</div>
<div class="box box-sub4">
	<img src="images/dinner.jpg" alt="ディナー"/>
	<p><span>dinner</span></p>
</div>

<p><span>morning</span></p>

</div>

<p><span>lunch</span></p>

</div>

</div>

<p><span>dinner</span></p>

</div>

4つのパターンをご紹介するために、<div>で囲んだ領域を4つ用意しました。

クラス名「box」には、共通のCSSを割り当てそれぞれ「box-sub1」「box-sub2」…には配置したい場所と見た目を指定するCSSを記述しています。

CSSを記述

▼まずは共通のCSSになります。

/* 共通CSS */
.box {
	position: relative;
	color: #fff;
	display: inline-block;
	overflow: hidden;
	font-weight: bold;
}
.box p {
	display: inline;
}

/* 共通CSS */

.box {

position: relative;

color: #fff;

display: inline-block;

overflow: hidden;

font-weight: bold;

}

.box p {

display: inline;

}

▼個別CSSを記述していきます。

Sample1の場合

/* 1(MORNING) */
.box-sub1{
	padding: 5px;
}

.box-sub1 p span {
	position: absolute;
	display: inline-block;
	right: -25px;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.6), inset 0px 5px 20px rgba(255,255,255,0.2);
	text-align: center;
	text-transform: uppercase;
	top: 22px;
	background: #53bbf1;
	width: 100px;
	padding: 3px 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-0-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.box-sub1 p:before {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: -17px;
	right: 69px;
	z-index: -1;
	border: 17px solid;
	border-color: transparent transparent #136996 transparent;
}
.box-sub1 p:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 75px;
	z-index: -1;
	right: -10px;
	border: 17px solid;
	border-color: #136996 transparent transparent transparent;
}

/* 1(MORNING) */

.box-sub1{

padding: 5px;

}

.box-sub1 p span {

position: absolute;

display: inline-block;

right: -25px;

box-shadow: 0px 2px 5px rgba(0,0,0,0.6), inset 0px 5px 20px rgba(255,255,255,0.2);

text-align: center;

text-transform: uppercase;

top: 22px;

background: #53bbf1;

width: 100px;

padding: 3px 10px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-0-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

.box-sub1 p:before {

content: "";

width: 0;

height: 0;

position: absolute;

top: -17px;

right: 69px;

z-index: -1;

border: 17px solid;

border-color: transparent transparent #136996 transparent;

}

.box-sub1 p:after {

content: "";

width: 0;

height: 0;

position: absolute;

top: 75px;

z-index: -1;

right: -10px;

border: 17px solid;

border-color: #136996 transparent transparent transparent;

}

Sample2の場合

/* 2(LUNCH) */
.box-sub2{
	padding: 0;
}

.box-sub2 p span {
	position: absolute;
	display: inline-block;
	right: -25px;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.4), inset 0px 5px 15px rgba(255,255,255,0.6);
	text-align: center;
	text-transform: uppercase;
	top: 22px;
	background: #dc040e;
	width: 100px;
	padding: 3px 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-0-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.box-sub2 p:before {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: -17px;
	right: 69px;
	z-index: -1;
	border: 17px solid;
	border-color: transparent transparent #490003 transparent;
}
.box-sub2 p:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 74px;
	z-index: -1;
	right: -10px;
	border: 17px solid;
	border-color: #490003 transparent transparent transparent;
}

/* 2(LUNCH) */

.box-sub2{

padding: 0;

}

.box-sub2 p span {

position: absolute;

display: inline-block;

right: -25px;

box-shadow: 0px 2px 5px rgba(0,0,0,0.4), inset 0px 5px 15px rgba(255,255,255,0.6);

text-align: center;

text-transform: uppercase;

top: 22px;

background: #dc040e;

width: 100px;

padding: 3px 10px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-0-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

.box-sub2 p:before {

content: "";

width: 0;

height: 0;

position: absolute;

top: -17px;

right: 69px;

z-index: -1;

border: 17px solid;

border-color: transparent transparent #490003 transparent;

}

.box-sub2 p:after {

content: "";

width: 0;

height: 0;

position: absolute;

top: 74px;

z-index: -1;

right: -10px;

border: 17px solid;

border-color: #490003 transparent transparent transparent;

}

Sample3の場合

/* 3(CAFE) */
.box-sub3{
	padding: 5px;
}

.box-sub3 p span {
	position: absolute;
	display: inline-block;
	left: -28px;
	box-shadow: 0px -2px 5px rgba(0,0,0,0.2), inset 0px 5px 20px rgba(255,255,255,0.2);
	text-align: center;
	text-transform: uppercase;
	bottom: 18px;
	background: #d29001;
	width: 100px;
	padding: 3px 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-0-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.box-sub3 p:before {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: 72px;
	left: -10px;
	z-index: -1;
	border: 17px solid;
	border-color: transparent transparent #3e2a00 transparent;
}
.box-sub3 p:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: -24px;
	z-index: -1;
	left: 56px;
	border: 17px solid;
	border-color: #3e2a00 transparent transparent transparent;
}

/* 3(CAFE) */

.box-sub3{

padding: 5px;

}

.box-sub3 p span {

position: absolute;

display: inline-block;

left: -28px;

box-shadow: 0px -2px 5px rgba(0,0,0,0.2), inset 0px 5px 20px rgba(255,255,255,0.2);

text-align: center;

text-transform: uppercase;

bottom: 18px;

background: #d29001;

width: 100px;

padding: 3px 10px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-0-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

.box-sub3 p:before {

content: "";

width: 0;

height: 0;

position: absolute;

bottom: 72px;

left: -10px;

z-index: -1;

border: 17px solid;

border-color: transparent transparent #3e2a00 transparent;

}

.box-sub3 p:after {

content: "";

width: 0;

height: 0;

position: absolute;

bottom: -24px;

z-index: -1;

left: 56px;

border: 17px solid;

border-color: #3e2a00 transparent transparent transparent;

}

Sample4の場合

/* 4(DINNER) */
.box-sub4{
	padding: 5px;
}

.box-sub4 p span {
	position: absolute;
	display: inline-block;
	right: -25px;
	box-shadow: 0px -2px 5px rgba(0,0,0,0.6), inset 0px 5px 20px rgba(255,255,255,0.2);
	text-align: center;
	text-transform: uppercase;
	bottom: 22px;
	background: #5e2777;
	width: 100px;
	padding: 3px 10px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-0-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.box-sub4 p:before {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: 78px;
	right: -10px;
	z-index: -1;
	border: 17px solid;
	border-color: transparent transparent #2e0d3d transparent;
}
.box-sub4 p:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: -20px;
	z-index: -1;
	right: 66px;
	border: 17px solid;
	border-color: #2e0d3d transparent transparent transparent;
}

/* 4(DINNER) */

.box-sub4{

padding: 5px;

}

.box-sub4 p span {

position: absolute;

display: inline-block;

right: -25px;

box-shadow: 0px -2px 5px rgba(0,0,0,0.6), inset 0px 5px 20px rgba(255,255,255,0.2);

text-align: center;

text-transform: uppercase;

bottom: 22px;

background: #5e2777;

width: 100px;

padding: 3px 10px;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-0-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.box-sub4 p:before {

content: "";

width: 0;

height: 0;

position: absolute;

bottom: 78px;

right: -10px;

z-index: -1;

border: 17px solid;

border-color: transparent transparent #2e0d3d transparent;

}

.box-sub4 p:after {

content: "";

width: 0;

height: 0;

position: absolute;

bottom: -20px;

z-index: -1;

right: 66px;

border: 17px solid;

border-color: #2e0d3d transparent transparent transparent;

}

影となる三角部分を指定するのに少し悩むかもしれませんが、好みのリボンになるように調整してみてください。