0

CSS3の境界線を使用して、ユーザーが画像をドラッグできる形状を作成しています。

問題は、画像をdivの形にしたいと思っていることです。

これはCSSで実行できますか、それともjQueryを使用して実行する必要がありますか？

ありがとう

編集：

 <div class="my-div">
     <img class="div-image" src="image.jpg" />
 </div>

 border-left: 300px solid red;
 border-right: 200px solid transparent;
 border-top: 30px solid transparent;
 border-bottom: 25px solid transparent;

これにより、画像の形に傾斜した側面を持つボックスが作成されます

次に例を示します：jsfiddle

4

3 に答える 3

1

ここでの本当の問題は、CSSの境界線を使用して図形をハックすることです。

求めていることを実行したい場合は、より良いソリューションを使用する必要があります。つまり、CSSで偽造するのではなく、実際のグラフィックス（おそらくSVGまたはCanvas）を使用して形状を作成します。CSSの形状は非常に限られており、CSSがそれらを実行できるという事実を示すためにのみ本当に役立ちます。実際にはあまり使用されていません。

私の提案はSVGです。SVGは、HTMLページに埋め込むことができるベクターグラフィック形式であり、質問に対するはるかに優れたソリューションになります。好きな形の要素を簡単に作成して、画像で塗りつぶすことができます。SVGの唯一の欠点は、古いブラウザー（IE8など）ではサポートされていないことですが、IE8はVMLと呼ばれる代替形式をサポートしているため、これは簡単に回避できます。SVGまたはVMLのいずれかで動作するいくつかのJavascriptライブラリが存在します

Raphaelというライブラリを検索することをお勧めします。あなたができることのいくつかについては、彼らのサイトの例を参照してください。それはすべて本当にとても簡単です。新しい構文を学ぶ必要がありますが、基本を理解すると、達成できることに驚くでしょう。

[編集]あなたがやろうとしていることのJSFiddleの例で、質問に対するあなたの編集を見たところです。

JSFiddleが機能しない理由は、灰色の背景で表示されている形状が境界線で構成されているためです。ボックスの境界線は、ボックスのコンテンツの上に表示されます。あなたの場合、ボックスの境界線はボックス自体の全体を占めるため、灰色の境界線だけが表示されます。画像は読み込まれますが、ボックスの後ろに隠れています。私が最初に言ったことを繰り返します。CSSShapesは、単純なハック以外には良い解決策ではありません。堅牢なソリューションが必要な場合は、SVGを使用してください。

于 2013-01-17T10:31:48.673 に答える
0

div内で画像を100％幅に設定する必要があります。

例：

<div class="new-shape">(image)</div>

CSS：

div.new-shape img {
    width: 100%;
}
于 2013-01-17T10:32:23.613 に答える
0 
$("div[class=my-div]").css({  "position": "absolute",
        "top": "300px",
        "left": "200px",
        "display": "block",
        "width": "500px"
    });
于 2013-01-17T10:57:39.967 に答える