[CSS]画像を使用しないで、紙テープを折り返したようにするスタイルシート

画像を使用しないで、紙テープを折り返したようなエフェクトを実装するスタイルシートをNettuts+から紹介します。

デモのキャプチャ

Quick Tip: Practical CSS Shapes
デモページ

ブログの見出しなどによく使用されるデザインで、一般的には画像を使用して実装することが多いですが、CSSで簡単に実装できます。
CSSにはCSS3を使用しており、ブラウザごとに表示が異なりますが、IE7でもそれなりの表示に対応しています。

デモのキャプチャ:Firefox

Firefox 3.6でのキャプチャ

デモのキャプチャ:Chrome

Chromeでのキャプチャ

デモのキャプチャ:IE7

IE7でのキャプチャ

実装方法

HTML

CSS

sponsors

top of page

©2018 coliss