6

DIVが画像を三角形にカットし、それによって画像の一部のみを三角形で表示するIMGを含むDIVを作成するにはどうすればよいですか。

それで..

<div>
   <img src='some_image' />
</div>

画像は正方形ですが、画像を含むDIVは三角形です。 http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/は、このソリューションがxブラウザーに対応していない（つまり非）ことを除いて、これを非常にうまく解決します。

http://css3pie.com/は面白そうに見えますが、これはPHPに依存しています。

4

2 に答える 2

6

非長方形のDOM要素を作成することはできません。

それをハックする方法はいくつかあります。

まず、要素の両側にさまざまな幅のCSS境界線を使用して、要素を三角形に見せるための方法があります。それでも長方形のままですが、三角形のように見えます。

これに関するチュートリアルがここにあります：http ：//www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/

このアプローチの欠点は、直角三角形の作成に限定されることです。それらのいくつかを一緒に結合してこれを回避することができますが、その場合、イメージ用の単一のコンテナーがありません。

別のハッキーな方法は、回転した要素をメイン要素の上に配置して、画像の適切な部分を覆い、三角形に見えるようにすることです。これはすべてのブラウザーで機能しますが、IEには回転を行うための非常に厄介な構文があり、形状を作成するためにのみ使用することを考えると、ブラウザーにとっては非常に重いものです。

別のオプションは、CSS変換を使用することかもしれません。ただし、これは少数の最新ブラウザでのみサポートされているため、ほとんどのユーザーでは機能しません。

<div>より良いアプローチは、要素に靴べらを付けようとするのではなく、これに適切なグラフィックライブラリを使用することです。

Raphaelの使用をお勧めします。これは、SVG（またはIEの場合はVML）を使用してブラウザーに直接描画できるJavascriptライブラリです。それを使用して三角形を作成し、それらをグラフィックで塗りつぶすのは簡単です。開始するには、Raphaelホームページの例を参照してください。

于 2011-04-15T16:24:32.613 に答える
3

結果に応じて、私が知る限り、三角形のDIVを作成することはできません。Transform:;ただし、1つの解決策は、問題のdiv内にdivを配置し、画像の半分をPNGで切り取って透明のみを表示することです。パートスルー。ただし、これが実行可能なオプションであるかどうかはわかりません。

于 2011-04-15T16:21:21.043 に答える