20

隣接するdivのサイズを変更するjavascriptウィジェットを作成して、ユーザーがその上にカーソルを合わせたときにdivの背景画像をより多く表示します。これは十分に単純であり、（明らかに）まっすぐなエッジを持つdivでうまく機能します。ただし、境界エッジは「傾斜する必要があります」。

css3を使用して2つのDOM要素の間に傾斜した境界線を作成する簡単な方法はありますか？

私はcss3変換（つまり、スキュー）と対角線の境界線のトリック（半分の色、半分の透明度を使用）に出くわしましたが、どちらも私が必要とするものを達成できないようです。

私が達成しようとしている効果は、次の画像のようになります。

dom要素間の対角線の境界

4

3 に答える 3

8

技術的には、画像を回転 (CSS3 を参照transform: rotate(<X>deg))<div/>に埋め込み、埋め込まれた画像を逆の角度で回転させることができます。

または、SVG (とともに<clipPath>) を使用してこの効果を実現することもできます。さらに、タグに埋め込まれた SVG<object/>は JavaScript を使用できるため、レスポンシブ部分をライドの一部にすることができます。

両方の JSFiddle が進行中です。

EDIT1: CSS バージョン: http://jsfiddle.net/kU3tu/
EDIT2: SVG バージョン: http://jsfiddle.net/b2JJK/

于 2012-04-18T09:09:35.253 に答える
4

私は私の側から試してみましたが、それがあなたの助けになるかもしれません。

HTML

<div class="container">
<div class="imageWrap ro">
    <div class="pic"></div>
</div>
<div class="imageWrap">
    <div class="pic2"></div>
</div>
</div>​

CSS

.container{
    width:600px;
    height:400px;
    border:1px solid red;
    overflow:hidden;
    white-space:nowrap;
}
.imageWrap{
    width:300px;
    display:inline-block;
    height:500px;
    position:relative;
    width:400px;
    vertical-align:top;
    margin-left:-70px;
}
.imageWrap.ro{
    border-right:5px solid red;
    -webkit-transform:rotate(15deg);
    -moz-transform:rotate(15deg);
    transform:rotate(15deg);
    overflow:hidden;
    z-index:1;
    margin-left:-100px;
    margin-top:-80px;
}
.pic{
    background:url('http://lorempixel.com/output/nightlife-q-c-746-711-9.jpg');
    -webkit-transform:rotate(-15deg);
    -moz-transform:rotate(-15deg);
    transform:rotate(-15deg);
    width:640px;
    height:640px;
    position:absolute;
    left:-50px;
}
.pic2{
    width:400px;
    height:400px;
    background:url('http://lorempixel.com/output/sports-h-c-609-626-7.jpg');
}

</ p>

これをチェックしてくださいhttp://jsfiddle.net/fZMuJ/5/

于 2012-04-18T09:40:56.220 に答える
1

私が考えることができる解決策は、2 つの絶対位置の画像と、オーバーフローを非表示に設定した div コンテナーを使用することです。

赤と緑はイメージです (赤は上から短く、緑は下から短い可能性があります)。青はoverflow:hiddenのコンテナです。

画像

ただし、この解決策では画像を回転させる必要があるため、使用に適していない可能性があります。

2 番目の解決策は、1 つの画像を使用し、区切り div を単に回転した境界線にすることです。ただし、この場合、ハックを必要とせずに、とにかく適切な画像を事前に準備できます。

于 2012-04-18T09:04:11.727 に答える