[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners

背景にすっーと切り込みを入れて、その隙間にパネルの四隅を留めたような美しいエフェクトを実装するCSS3のチュートリアルを紹介します。

CSS3 tucked corners

• デモ
• 実装

デモ

デモはCSS3グラデーションをサポートした最新のモダンブラウザでご覧ください。

デモページ

実装

Step 1: HTML

パネルは4つのコーナーのエフェクトを疑似要素で作成するため、2つのdiv要素で実装します。

<div class="tucked-corners-top">
	<div class="tucked-corners-bottom">
	<!--  コンテンツ -->
	</div>
</div>

Step 2: CSS

「[class*='tucked-corners-']」以下が、4つのコーナーのスタイルです。

.tucked-corners-top {
    position: relative;
    width: 500px; min-height: 200px;
    margin: 100px auto; padding: 20px;
    background-color: #fff; /* Fallback */
    background:	linear-gradient(45deg,  transparent 10px, #fff 10px),
		linear-gradient(135deg, transparent 10px, #fff 10px),
		linear-gradient(225deg, transparent 10px, #fff 10px),
		linear-gradient(315deg, transparent 10px, #fff 10px);
    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);			
}

[class*='tucked-corners-']::before, /* 4つのコーナー共通のスタイル */
[class*='tucked-corners-']::after {
	content: '';
	position: absolute;
	height: 20px; width: 80px;
	box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
        box-shadow: none; /* IE9では非表示に */
}
.tucked-corners-top::before, /* 上左と上右 */
.tucked-corners-top::after {
	top: -10px;
}
.tucked-corners-bottom::before, /* 下左と下右 */
.tucked-corners-bottom::after {
	bottom: -10px;
}		
.tucked-corners-top::before, /* 上左と下左 */
.tucked-corners-bottom::before {
	left: -42px;
}
.tucked-corners-top::after, /* 上右と下右 */
.tucked-corners-bottom::after {
	right: -42px;
}
.tucked-corners-top::before { /* 上左 */
	transform: rotate(-45deg);
}
.tucked-corners-top::after { /* 上右 */
	transform: rotate(45deg);			
}
.tucked-corners-bottom::before { /* 下左 */
	transform: rotate(-135deg);
}
.tucked-corners-bottom::after { /* 下右 */
	transform: rotate(135deg);
}

IE9はCSS3グラデーションをサポートせず、box-shadowをサポートしているため、box-shadowをIE9では適用しないようにしています。
22行目のとこです。

[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
	box-shadow: none; /* IE9では非表示に */
}