blockquote属性のヴィジュアル的表現として、大っきい「”」をあしらうヤツがよくありますね。あれって、片側だけあしらうならbackground画像なんか使ってやれば済むハナシですが、両端に「”」をつけるとなると、少々厄介かも。
blockquoteをさらにdivかなんかで囲って、開始用と終了用のクォートのbackground画像をそれぞれに割り当てる方法もありますが、htmlのソースを汚しちゃうのであまり気分は良くないですよね。まあ、jQueryかなんかでやっちゃうんでしょうけど。

今回ご紹介するのは、CSSだけでできる方法です。:before、:after擬似要素を使います。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			blockquote:before, blockquote:after{
				position: absolute;	/* 必須 */
				display: block;		/* 必須 */
				font: 8em/1 serif, "ＭＳ Ｐ明朝", "MS PMincho";
				color: #ffdddd;
			}
			blockquote:before{
				content: '“';		/* 必須 */
				margin-top: -0.1em;
				left: 0.1em;
			}
			blockquote:after{
				content: '”';		/* 必須 */
				margin-top: -0.25em;
				right: 0.25em;
			}
			blockquote{
				margin: 1em 5em;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		<blockquote>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</blockquote>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</body>
</html>

サンプルはこちらです。
ソースの、「/* 必須 */」とあるのが、このネタの骨格にあたります。他のプロパティは、お好みでどうぞ。
今回クォーテーションにはテキストを使いましたが、擬似要素のcontentを「”」（←空文字列、つまり、シングルクォーテーション2つです。ややこしいので注意！）にして、background-imageとwidthを設定すれば、画像でもOKだと思います。z-indexをうまく使えば、クォーテーションがテキストの後ろに回りこんで、blockquoteのbackground-imageに見せることも可。
よろしければお試しあれ。

それにしても最近CSSネタばかりですな。次回は違うのを…。