Couper les coins à l'aide de CSS

Question

Je cherche à "couper" le coin supérieur gauche d'un div, comme si vous aviez plié le coin d'une page vers le bas.

J'aimerais le faire en pure CSS, y a-t-il des méthodes ?

Answer 1

Si l'élément parent a un fond de couleur unie, vous pouvez utiliser des pseudo-éléments pour créer l'effet :

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid red;
    width: 0;
}

<div></div>

http://jsfiddle.net/2bZAW/

---

P.S. Le prochain border-corner-shape est exactement ce que vous recherchez. Dommage que cela puisse être supprimé de la spécification et ne jamais être intégré dans les navigateurs dans la nature :(

Answer 2

Si vous avez besoin d'un bord découpé transparent vous pouvez utiliser un pseudo-élément ayant subi une rotation comme arrière-plan de l'image de l'utilisateur. div et le positionner pour découper le coin souhaité :

body {
  background: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}
div {
  position: relative;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}
div:after {
  content: '';
  position: absolute;
  width: 1100%; height: 1100%;
  top: 20px; right: -500%;
  background: rgba(255,255,255,.8);
  transform-origin: 54% 0;
  transform: rotate(45deg);
  z-index: -1;
}

<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

Notez que cette solution utilise des transformations et que vous devez ajouter les préfixes fournisseurs requis. Pour plus d'informations, voir peut utiliser .

A couper le bord inférieur droit vous pouvez changer les propriétés top, transform et transform-origin du pseudo-élément en :

body {
  background: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}
div {
  position: relative;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}
div:after {
  content: '';
  position: absolute;
  width: 1100%; height: 1100%;
  bottom: 20px; right: -500%;
  background: rgba(255,255,255,.8);
  transform-origin: 54% 100%;
  transform: rotate(-45deg);
  z-index: -1;
}

<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

Answer 3

Clip-Path CSS

Utilisation d'un clip-path est une nouvelle alternative qui se développe. Elle est de plus en plus prise en charge et est maintenant bien documentée. Puisqu'il utilise SVG pour créer la forme, il est réactif dès sa sortie de l'emballage.

• Peut-on utiliser

• Générateur de chemin de clip

  div { width: 200px; min-height: 200px; -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0); clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0); background: lightblue; }

  <div> <p>Some Text</p> </div>

Transformation CSS

J'ai une alternative à la réponse de transformation de web-tiki.

body {
  background: lightgreen;
}
div {
  width: 200px;
  height: 200px;
  background: transparent;
  position: relative;
  overflow: hidden;
}
div.bg {
  width: 200%;
  height: 200%;
  background: lightblue;
  position: absolute;
  top: 0;
  left: -75%;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  z-index: -1;
}

<div>
  <div class="bg"></div>
  <p>Some Text</p>
</div>

Answer 4

Voici une autre approche utilisant le CSS transform: skew(45deg) pour produire l'effet de coin coupé. La forme elle-même implique trois éléments (1 réel et 2 pseudo-éléments) comme suit :

• Le conteneur principal div L'élément a overflow: hidden et produit la bordure gauche.
• El :before pseudo-élément dont la hauteur est égale à 20 % de celle du conteneur parent et auquel est appliquée une transformation oblique. Cet élément produit la bordure en haut et la bordure coupée (inclinée) sur le côté droit.
• El :after qui a 80% de la hauteur du parent (en fait, la hauteur restante) et produit la bordure inférieure, la partie restante de la bordure droite.

La sortie produite est réactive, produit une coupe transparente en haut et supporte les arrière-plans transparents.

div {
  position: relative;
  height: 100px;
  width: 200px;
  border-left: 2px solid beige;
  overflow: hidden;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: calc(100% - 2px);
  left: 0px;
  z-index: -1;
}
div:before {
  height: 20%;
  top: 0px;
  border: 2px solid beige;
  border-width: 2px 3px 0px 0px;
  transform: skew(45deg);
  transform-origin: right bottom;
}
div:after {
  height: calc(80% - 4px);
  bottom: 0px;
  border: 2px solid beige;
  border-width: 0px 2px 2px 0px;
}
.filled:before, .filled:after {
  background-color: beige;
}

/* Just for demo */

div {
  float: left;
  color: beige;
  padding: 10px;
  transition: all 1s;
  margin: 10px;
}
div:hover {
  height: 200px;
  width: 300px;
}
div.filled{
  color: black;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

---

Vous trouverez ci-dessous une autre méthode pour produire l'effet de coin coupé en utilisant linear-gradient des images de fond. Une combinaison de 3 images à gradient (données ci-dessous) est utilisée :

• Un gradient linéaire (incliné vers le bas à gauche) pour produire l'effet de coin coupé. Ce gradient a une taille fixe de 25px x 25px.
• Un gradient linéaire pour fournir une couleur solide à gauche du triangle qui provoque l'effet de coupe. Un gradient est utilisé même s'il produit une couleur unie, car nous ne pouvons contrôler la taille et la position de l'arrière-plan que lorsque des images ou des gradients sont utilisés. Ce gradient est positionné à -25px sur l'axe X (ce qui signifie qu'il se termine avant l'endroit où la coupure est présente).
• Un autre gradient similaire au précédent, qui produit à nouveau une couleur unie, mais qui est positionné à 25px vers le bas sur l'axe des Y (à nouveau pour laisser de côté la zone de coupe).

La sortie produite est réactive, produit une coupe transparente et ne nécessite aucun élément supplémentaire (réel ou pseudo). L'inconvénient est que cette approche ne fonctionne que lorsque l'arrière-plan (remplissage) est une couleur unie et qu'il est très difficile de produire des bordures (mais c'est toujours possible, comme on le voit dans l'extrait).

.cut-corner {
  height: 100px;
  width: 200px;
  background-image: linear-gradient(to bottom left, transparent 50%, beige 50%), linear-gradient(beige, beige), linear-gradient(beige, beige);
  background-size: 25px 25px, 100% 100%, 100% 100%;
  background-position: 100% 0%, -25px 0%, 100% 25px;
  background-repeat: no-repeat;
}
.filled {
  background-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(to bottom left, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), beige calc(50% + 1px)), linear-gradient(beige, beige), linear-gradient(beige, beige);
  background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}

/* Just for demo */

*{
  box-sizing: border-box;
  }
div {
  float: left;
  color: black;
  padding: 10px;
  transition: all 1s;
  margin: 10px;
}
div:hover {
  height: 200px;
  width: 300px;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

Answer 5

Vous pourriez utiliser linear-gradient . Disons que le parent div avait une image de fond, et vous aviez besoin d'une div pour s'asseoir dessus avec un fond gris et un coin gauche corné. Vous pourriez faire quelque chose comme ça :

.parent-div { background: url('/image.jpg'); }
.child-div { 
   background: #333;
   background: linear-gradient(135deg, transparent 30px, #333 0);
}

Voir sur CodePen

Pour en savoir plus :

• Gradients CSS sur CSS-Tricks
• Coins biseautés et rayon de bordure négatif avec des dégradés CSS3