web-dev-qa-db-ja.com

CSSスキューのみのコンテナであり、コンテンツではありません

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

enter image description here

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

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

助けてください！ :)

csstransformskew
12
briteweb

コンテナをトリミングできるように、コンテナの位置とサイズを微調整し、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 <-後（アンチエイリアス）

13
AlienWebguy

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

HTMLのcanvas要素。

<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にもかかわらず...）。

[〜＃〜]編集[〜＃〜]
簡単なテストを行いました-キャンバスのサイズを設定する必要があるようです-また、すべての画像が正しく読み込まれるのを待ってから、キャンバスに合成します。

1
niko