web-dev-qa-db-fra.com

Couper l'image en diagonale avec CSS

Comment couper une partie d'une image ou d'un conteneur en diagonale en utilisant CSS?

La partie à découper a la forme d'un triangle

Example of image

Pour être plus précis: si l'image ci-dessus est l'image, la partie bleue doit être découpée, pas la jaune

Le html doit être:

<figure>
 <img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>

ou:

<div class="container">
  content
</div>

Il y a de ma propre enquête de nombreuses façons de le faire, mais la plupart d'entre elles sont hacky, donc à la recherche d'une meilleure approche

Prise en charge minimale du navigateur: IE11, derniers webkits, etc.

htmlcsscss-shapes
15
Doff3n

Utilisez CSS3 -clip-path et polygon comme ceci. Vous pouvez spécifier le chemin que vous souhaitez.

img {
  width: 100px;
  height: 100px;
  -webkit-clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
  clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
}
<img src="https://picsum.photos/id/0/100/100">

http://jsfiddle.net/r3p9ph5k/

Pour quelques bits supplémentaires, vous voudrez peut-être jeter un oeil à par exemple ce . De plus, pour plus d'informations sur IE, voir this .

12
Roope

Vous pouvez utiliser un pseudo element, combiné avec overflow:hidden;

Résultat

enter image description here

div {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
  background: url(http://placekitten.com/g/300/300);
}
div:after {
  content: "";
  position: absolute;
  top: 93%;
  left: 0;
  height: 100%;
  width: 150%;
  background: red;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
<div></div>
5
jbutler483

Celui-ci est un peu sale mais ... Voici l'idée:

HTML :

body {
  background: #eee;
}
figure {
  display: inline-block;
  overflow: hidden;
  padding-left: 20px;
  margin-left: -20px;
  padding-top: 50px;
  margin-top: -50px;
  padding-right: 20px;
  margin-right: -20px;
  height: 200px;
  transform: rotate(-10deg);
}
figure img {
  transform: rotate(10deg);
}
<figure>
  <img src="http://placehold.it/502x260&text=Random+Image" />
</figure>

Remarque: Une autre méthode pourrait être d'utiliser un pseudo-élément pour masquer l'image, mais cela ne produira pas une véritable "coupe" où vous devriez pouvoir voir à travers.

4
bob6664569

Juste une idée:

[~ # ~] html [~ # ~] 

<figure>
    <img src="http://placehold.it/500x500" alt="">
</figure>

[~ # ~] css [~ # ~] 

figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    line-height: 0;
}

figure:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    left: 0;
    bottom: -91%;
    background: red;
    -webkit-transform: rotate(355deg);
    transform: rotate(355deg);
}

Démo

Essayez avant d'acheter

1
insertusernamehere

-Vous pouvez utiliser http://cssplant.com/clip-path-generator pour cela.

C'est juste une "sale solution", la meilleure façon est de placer un svg au-dessus de l'img.

Peut-être que dans un futur, la "propriété clip css" prendrait en charge un autre type de formes que simplement "rect" et des choses comme ça pourraient être faites!

Une autre "manière sale" consiste à mettre un div au-dessus de l'img, avec la couleur d'arrière-plan que vous souhaitez et à la faire pivoter!

1
Anfuca