アルバムや写真のスクラップブックみたいなのに使えると思います。
box-shadow,transformを使っているのでCSS3対応ブラウザでないと見れません。

デモはこちら

<div class="wrapper">
	<div class="cut_t"></div>
	<div class="card">text</div>
	<div class="cut_b"></div>
</div>

<div class="wrapper">
	<div class="cut_t"></div>
	<div class="card">text</div>
	<div class="cut_b"></div>
</div>

	
<div class="wrapper">
	<div class="cut_t"></div>
	<div class="card">text</div>
	<div class="cut_b"></div>
</div>

.wrapper{
	padding: 5px;
	margin: 20px;
	width: 200px;
	height: 200px;
	position: relative;
	overflow: hidden;
	float: left;
}
.card{
	width: 200px;
	height: 200px;
	text-align: center;
	vertical-align: middle;
	line-height: 200px;
	font-size: 24px;
	font-weight: bold;
	box-shadow:1px 1px 2px 1px rgba(50, 50, 50, 0.2);
}

.cut_t{
	position: absolute;
	width: 80px;
	height: 80px;
	background: #FFF;
	box-shadow:0px 1px 2px 1px rgba(50, 50, 50, 0.2);
	transform:rotate(-45deg);
	top: -50px;
	left: -50px;
}
.cut_b{
	position: absolute;
	width: 80px;
	height: 80px;
	background: #FFF;
	box-shadow:0px 1px 2px 1px rgba(50, 50, 50, 0.2);
	transform:rotate(45deg);
	bottom: -50px;
	right: -50px;
}

【簡単な解説】

HTMLは全体を包んでいるwrapperと四角の要素本体のcard、切れ込みを作るcut_tとcut_bという構成になっています。今回はそれを3つ作っています。

CSSは.wrapperにposition:relativeとoverflow:hiddenをかけています。サイズは200px四方で10pxほどのpaddingをとっています。.cardが四角いカード本体ですがサイズは.wrapperと同じ大きさの200pxでbox-shadowをかけて影を落としています。テキスト系のCSSは今回は直接表現には影響しませんので、適宜変えて下さい。

.cut_t,.cut_bがこの表現の肝になるのですが、こちらはposition:absoluteで.wrapperに対して絶対配置になっています。.cut_tは左上、.cut_bは右下にくるように配置しています。こちらもbox-shadowをかけて影を落としています。ここでこれらにtransform:rotate(45deg)をかけることで図形を中心に（trasform:rotateのデフォルトの回転中心は図形の中心）45°傾けることができます。斜め以外の余分な部分は.wrapperにかけたoverflow-hiddenによって隠されます。また差し込み部分ですが.wrapperのpadding分だけ、斜めの線がカード本体より大きくなることで差し込んでいる感を演出しています（？）。

切れ込みの位置は.cut_d,.cut_bの大きさ・位置・角度を変えることで調整できます。