紙を折ったようなエフェクトを実装するチュートリアル | コリス

画像を使用せずに、スタイルシートで紙を折ったようなエフェクトを矩形の角に適用するチュートリアルを紹介します。 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> 適用するclassは「note」です。 全てのベースとなるスタイルシートです。 .note { position:relative; width:480px; padding:1em 1

[a2ikm]

これはかっこいい

[aeka]

すげーなー

[o_hiroyuki]

cssのみで紙を折ったような表現

[yntn247]

紙折れ

[k_static]

自分のブログのblockquoteに使ってみようかしら。

[spade9970]

"CSS3と:before疑似要素を使用"

[kijtra]

Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+

[nors]

http://nicolasgallagher.com/pure-css-folded-corner-effect/

[kkeisuke]

CSS3