Utilisation des chemins de coupe :
L'effet de papier déchiré peut également être produit en utilisant clip-path Il est possible de le faire uniquement avec HTML et CSS, mais la version purement CSS ne produirait pas un effet de clip aléatoire comme nous pouvons le faire en utilisant SNAP ou d'autres bibliothèques SVG, mais elle produit un effet de papier déchiré.
Le site inconvénient de l'utilisation de CSS clip-path est que c'est actuellement pris en charge uniquement dans les navigateurs optimisés pour Webkit . Firefox ne prend en charge que le url() et a donc besoin de SVGs en ligne alors qu'il n'a absolument aucun support dans IE. [ Puis-je utiliser ]
.torn-paper{
height: 300px;
width: 400px;
background: tomato;
-webkit-clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
}
<div class='torn-paper'>Lorem ipsum dolor sit amet</div>
Comme le clip-path est basée sur un pourcentage, elle est par défaut réactive et peut fonctionner lorsque le conteneur div a également une image de fond.
.torn-paper{
height: 300px;
width: 400px;
background: url(http://lorempixel.com/400/300);
-webkit-clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
}
<div class='torn-paper'>Lorem ipsum dolor sit amet</div>
Si nous voulons vraiment obtenir un effet aléatoire de papier déchiré, nous pouvons définir les coordonnées de l'objet de l'image. polygon clip path en utilisant JS et ensuite l'ajouter comme un style en ligne comme dans le snippet ci-dessous. L'extrait utilise une logique similaire à celle de votre réponse pour remplir le tableau.
var el = document.getElementsByClassName('torn-paper')[0];
var lastX = 0,
randX, randY, polygonPoints = ["0% 0%"];
randY = Math.floor(Math.random() * 20) + 80;
polygonPoints.push(lastX + '% ' + randY + '%');
while (lastX <= 100) {
randX = Math.floor(Math.random() * 5);
randY = Math.floor(Math.random() * 10) + 85;
polygonPoints.push(randX + lastX + '% ' + randY + '%');
lastX = lastX + randX;
}
polygonPoints.push("100% 0%");
el.style['-webkit-clip-path'] = 'polygon(' + polygonPoints.join() + ')';
el.style['clip-path'] = 'polygon(' + polygonPoints.join() + ')';
.torn-paper {
height: 300px;
width: 400px;
background: tomato;
}
0
<div class='torn-paper'>Lorem ipsum dolor sit amet</div>
Je n'avais pas fait de ce qui suit ma réponse principale parce que les SVG ont déjà été couverts d'une manière différente dans la réponse d'Akshay, mais l'utilisation de SVG en ligne pour les clip-path fonctionnerait également dans Firefox . IE ne le supporte toujours pas.
var el = document.getElementsByClassName('torn-paper')[0];
var path = document.getElementById('clipper-path');
var lastX = 0,
randX, randY, polygonPoints = ["0 0"];
randY = (Math.floor(Math.random() * 20) + 80) / 100;
polygonPoints.push(lastX + ' ' + randY + '');
while (lastX <= 1) {
randX = Math.floor(Math.random() * 5) / 100;
randY = (Math.floor(Math.random() * 10) + 85) / 100;
polygonPoints.push(randX + lastX + ' ' + randY + '');
lastX = lastX + randX;
}
polygonPoints.push("1 0");
path.setAttribute('d', 'M' + polygonPoints.join() + 'z');
.torn-paper {
height: 300px;
width: 400px;
background: tomato;
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
<svg width="0" height="0">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d='M0 0, 1 0, 1 1, 0 1z' id='clipper-path' />
</clipPath>
</defs>
</svg>
<div class="torn-paper">Lorem ipsum dolor sit amet</div>
Utilisation de Canvas :
Je sais que vous n'avez pas marqué Canvas, mais si vous cherchez un support pour IE également, l'utilisation de Canvas serait également une bonne option. Canvas est très bien supporté par les navigateurs (comme SVG). Je l'inclus ici juste comme une autre option qui pourrait être utilisée.
L'approche est très similaire à celle expliquée précédemment, car ici aussi nous créons un chemin et nous découpons le canevas en fonction de ce chemin.
Les extraits ci-dessous sont testé dans IE9+, Edge, Firefox, Chrome, Safari et Opera .
var canvas = document.getElementById('torn-canvas');
var ctx = canvas.getContext('2d');
var lastX = 0,
randX, randY;
ctx.save();
ctx.beginPath();
ctx.moveTo(0, 0);
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
ctx.lineTo(0, randY);
while (lastX <= canvas.width) {
randX = (Math.floor(Math.random() * 7.5)) / 100 * canvas.width;
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
lastX = lastX + randX;
ctx.lineTo(lastX, randY);
}
ctx.lineTo(canvas.width, 0);
ctx.closePath();
ctx.clip();
ctx.beginPath();
ctx.fillStyle = 'tomato';
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
ctx.restore();
.container {
position: relative;
height: 300px;
width: 400px;
}
#torn-canvas {
position: absolute;
z-index: -1;
}
<div class='container'>
<canvas id='torn-canvas' height='300px' width='300px'></canvas>Lorem ipsum dolor sit amet...</div>
Nous pouvons même ajouter une image comme arrière-plan en dessinant d'abord l'image sur le Canvas, puis en la découpant en forme.
var canvas = document.getElementById('torn-canvas');
var ctx = canvas.getContext('2d');
var lastX = 0,
randX, randY, img = new Image();
ctx.save();
img.src = 'http://lorempixel.com/400/300/nature/4';
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
ctx.restore();
ctx.beginPath();
ctx.moveTo(0, 0);
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
ctx.lineTo(0, randY);
while (lastX <= canvas.width) {
randX = (Math.floor(Math.random() * 5)) / 100 * canvas.width;
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
lastX = lastX + randX;
ctx.lineTo(lastX, randY);
}
ctx.lineTo(canvas.width, 0);
ctx.closePath();
ctx.clip();
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.restore();
.container {
position: relative;
height: 300px;
width: 400px;
color: white;
}
#torn-canvas {
position: absolute;
z-index: -1;
}
<div class='container'>
<canvas id='torn-canvas' height='300px' width='300px'></canvas>Lorem ipsum dolor sit amet...</div>
4 votes
Si vous préférez un aspect plus "réaliste", vous pouvez utiliser une image PNG personnalisée et un découpage de l'image en bordure, comme dans cette question : stackoverflow.com/questions/29349151/ utilisez simplement une image avec l'effet sur le bord droit au lieu du haut et du bas comme dans l'exemple de ma réponse. stackoverflow.com/a/31392023/4952851 .
1 votes
Les gens doivent arrêter de prétendre que CSS est un programme de dessin.