CSS Inclinaison seul contenant, pas le contenu

Question

CSS Inclinaison seul contenant, pas le contenu

j'ai du mal à trouver comment faire fonctionner la mise en page suivante. Je ne suis pas limité aux CSS purs - je sais que JS sera impliqué pour le rendre cross-browser - mais une solution CSS serait génial. Voici ce que je suis en train de réaliser:

enter image description here

j'ai essayé le code suivant, déformant le conteneur puis déformant l'image dans la direction opposée, mais il me donne juste une image carrée. Chrome inspecteur me montre que le conteneur est biaisé correctement, mais déformer l'image en arrière le rend carré à nouveau. Ajout d'un débordement: caché au type de conteneur des travaux, mais les bords de l'angle deviennent dentelés. Voici ce que j'ai essayé:

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

s'il vous Plaît aider! :)

12

css skew transform

demandé sur DarkAjax 2013-01-31 02:59:34

2 réponses

score 13 · Answer 1

besoin de modifier le positionnement et la taille du conteneur pour que vous puissiez le recadrer, et appliquer le backface-visibility la règle:

.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 <- avant (alias)

http://codepen.io/anon/pen/wnlpt <- après (anti-aliasing)

score 1 · Answer 2

au lieu d'une solution CSS, vous pouvez également obtenir l'effet en utilisant une toile et quelques JS; et en composant une série d'images recadrées sur cette toile. L'avantage de la méthode canvas étant que vous obtiendrez potentiellement des bords plus lisses sur les cultures, et il est potentiellement un peu mieux soutenu.

Un élément canvas HTML;

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

Et 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);
}

le code est juste au-dessus de ma tête - Je ne l'ai pas testé. Mais, fondamentalement, - permet de dire vous avez une toile qui est un maximum de 1000px de large et 100px de haut. Ce qui se passe ci-dessus, c'est que vous mettez en place une zone de coupure avec une ligne diagonale à travers la toile du point (800,0) à (900,100) et puis vous dessinez l'image dans cette zone de coupure... Ensuite, définissez un nouveau chemin de coupure 200 pixels plus court pour chaque image (notez le bit '200 * i'). Évidemment, le calcul doit être ajustée pour un nombre arbitraire d'images, et ainsi de suite... Mais l'idée est là.

un peu plus compliqué que le CSS pur peut-être-mais comme je l'ai dit - peut-être un peu mieux pris en charge cross-browser (IE nonobstant...).

EDIT

A fait un test rapide-on dirait que vous avez besoin de régler les dimensions de la toile - et aussi évidemment attendre que toutes les images se chargent correctement avant de pouvoir les composite sur la toile.

Las etiquetas más populares

CSS Inclinaison seul contenant, pas le contenu

2 réponses