「FirefoxとSafariのCSS徹底検証」では、直近の2回に渡ってCSSのプロパティ「transform」を紹介している。 CSSでトランスフォーム:変形処理「transform」の基礎 CSSでトランスフォーム:1つの要素に複数の変形処理を適用する 今回は番外編として、transformプロパティを使って、画像に対し斜めの帯を付けて表示するテクニックを紹介しよう。 画像にななめの帯を付けて表示する transformプロパティを利用すれば、ヘッダー画像にななめの帯を付けるようなデザインをCSSで実現することができる。 たとえば、次のサンプルでは「Welcome to my Homepage」という文字を表示した黄色い帯を画像の右上に重ね、45度回転して表示している。このとき、黄色い帯の両端を画像に合わせてカットするため、全体を囲んだ
![フォトショいらず:CSSで画像の上に斜めの帯と文字を表示してみる - builder by ZDNet Japan](https://cdn-ak-scissors.b.st-hatena.com/image/square/bcd8cdfa7d5aed2702461df3054a8c1971e14832/height=288;version=1;width=512/https%3A%2F%2Fbuilder.japan.zdnet.com%2Fstorage%2F2011%2F01%2F24%2Fa8c002df360763a7cd6f52040be0bbaa%2Fstory_media%2F20388634%2F090220css-transform_184x138.jpg)