[CSS]角丸と併用可能、紙を折ったようなエフェクトを実装するチュートリアル

画像を使用せずに、スタイルシートで紙を折ったようなエフェクトを矩形の角に適用するチュートリアルを紹介します。

Pure CSS folded-corner effect

[ad#ad-2]

対応ブラウザはCSS3と:before疑似要素を使用しているため、Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+です。

デモページ

紙を折ったようなエフェクトの実装

紙を折ったようなエフェクトは、全部で4種類あります。

HTML

HTMLはdiv要素を使用するだけで、class名を変更するだけです。

<div class="note">
コンテンツ
</div>

デモページ（当方作成）

[ad#ad-2]

CSS

適用するclassは「note」です。
全てのベースとなるスタイルシートです。

.note {
	position:relative;
	width:480px;
	padding:1em 1.5em;
	margin:2em auto;
	color:#fff;
	background:#97C02F;
	overflow:hidden;
}

.note:before {
	content:"";
	position:absolute;
	top:0;
	right:0;
	border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
	border-style:solid;
	border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
	background:#658E15; /* For Opera when also applying a border-radius */
	display:block; width:0; /* Only for Firefox 3.0 damage limitation */
/* Optional: shadow */
	-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

デモページ（当方作成）

CSS

適用するclassは「note red rounded」です。
角丸を併用し、カラーをレッドにします。

.note.red {background:#C93213;}
.note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}

角丸を適用する「rounded」は、他のものにも併用することが可能です。

.note.rounded {
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

.note.rounded:before {
	border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
	border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
	-webkit-border-bottom-left-radius:5px;
	-moz-border-radius:0 0 0 5px;
	border-radius:0 0 0 5px;
}

デモページ（当方作成）

CSS

適用するclassは「note blue」です。
カラーにブルーを適用し、透過を使用します。

.note.blue {background:#53A3B4;}
.note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}

デモページ（当方作成）

CSS

適用するclassは「note taupe」です。
カラーにブラウンを適用し、すこし明るめにしています。

.note.taupe {background:#999868;}
.note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}