12

次のレイアウトを機能させる方法がわかりません。私は純粋な CSS に限定されているわけではありません - クロスブラウザーにするために JS が関与することは知っていますが、CSS ソリューションは素晴らしいものです。これが私が達成しようとしていることです：

ここに画像の説明を入力

次のコードを試してみました。コンテナを傾けてから、画像を反対方向に傾けましたが、正方形の画像しか得られません。Chrome インスペクタは、コンテナが適切に傾斜していることを示していますが、画像を後方に傾斜させると、再び正方形になります。オーバーフローを追加する: コンテナーの種類に非表示を追加しますが、角度の端がギザギザになります。これが私が試したことです：

http://codepen.io/anon/pen/ubrFz

助けてください！:)

4

2 に答える 2

13

backface-visibilityコンテナーの位置とサイズを微調整して、トリミングし、ルールを適用できるようにする必要があります。

.skew {
    -webkit-backface-visibility : hidden; /* the magic ingredient */
    -webkit-transform           : skew(16deg, 0);
    overflow                    : hidden;
    width                       : 300px;
    height                      : 260px;
    position                    : relative;
    left                        : 50px;
    border                      : 1px solid #666
}

.skew img {
    -webkit-transform : skew(-16deg, 0);
    position          : relative;
    left              : -40px;
}

http://codepen.io/anon/pen/HLtlG <- 前 (エイリアス)

http://codepen.io/anon/pen/wnlpt <- after (アンチエイリアス)

于 2013-01-30T23:04:58.763 に答える
1

CSS ソリューションの代わりに、キャンバスと JS を使用して効果を達成することもできます。一連のトリミングされた画像をそのキャンバスに合成します。キャンバス方式の利点は、作物のエッジがより滑らかになる可能性があり、サポートが少し向上する可能性があることです。

HTML のキャンバス要素。

<canvas id="mycanvas"></canvas>

そしてJS;

var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = '../my/image1.jpg';
img2.src = '../my/image2.jpg';
img3.src = '../my/image3.jpg';

var can = document.getElementById("mycanvas");
var ctx = can.getContext('2d');

var imgs = [img1, img2, img3]; //array of JS image objects that you've set up earlier

can.width = 1000;
can.height = 100;

for (var i=0; i < imgs.length; i++) {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(800 - (200 * i), 0);
    ctx.lineTo(900 - (200 * i), 100); 
    ctx.lineTo(0, 100);
    ctx.closePath();
    ctx.clip();

    ctx.drawImage(imgs[i], 0, 0);
}

コードは私の頭のてっぺんから外れています - 私はそれをテストしていません。しかし、基本的には、最大幅 1000 ピクセル、高さ 100 ピクセルのキャンバスがあるとします。上で何が起こるかというと、ポイント (800,0) から (900,100) までのキャンバスを横切る対角線でクリッピング エリアを設定し、そのクリッピング エリアに画像を描画します。次に、新しいクリッピング パス 200 ピクセルを設定します。画像ごとに短くなります (「200 * i」ビットに注意してください)。明らかに、任意の数の画像などに合わせて計算を調整する必要があります...しかし、アイデアはそこにあります。

純粋な CSS よりも少しトリッキーかもしれませんが、私が言ったように、サポートされているクロスブラウザーが少し優れている可能性があります (IE は関係ありませんが...)。

編集
簡単なテストを行いました-キャンバスの寸法を設定する必要があるようです-また、キャンバスに合成する前に、すべての画像が適切に読み込まれるのを待ちます。

于 2013-01-30T23:24:17.737 に答える