Couper les coins en utilisant CSS

Si vous avez besoin d'un bord découpé transparent , vous pouvez utiliser un pseudo-élément pivoté comme arrière-plan pour le div et le positionner pour découper le coin désiré:

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 de fournisseur requis. Pour plus d'informations, voir canIuse.

Pour couper le bord inférieur droit , vous pouvez modifier les propriétés top, transform et transform-origin de le pseudo élément à:

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>

CSS clip-Chemin

L'utilisation d'un clip-path est une nouvelle alternative. Il commence à être soutenu de plus en plus et devient maintenant bien documenté. Comme il utilise SVG pour créer la forme, il est réactif tout droit sorti de la boîte.

• CanIUse
• 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 transformation de web-tiki réponse.

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>

Voici une autre approche utilisant 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:

• l'élément conteneur principal div a {[6] } et produit la bordure gauche.
• le pseudo-élément :before qui représente 20% de la hauteur du conteneur parent et auquel une transformation oblique est appliquée. Cet élément prodcues la bordure sur le dessus et couper la bordure (inclinée) sur le côté droit.
• Le :after pseudo-élément qui est 80% de la hauteur du parent (fondamentalement, 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 prend en charge 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>

Ci-dessous est une autre méthode pour produire l'effet de coin coupé en utilisant des images d'arrière-plan linear-gradient. Une combinaison de 3 les images dégradées (données ci-dessous) sont utilisées:

• un gradient linéaire (incliné vers le bas à gauche) pour produire l'effet de coin coupé. Ce dégradé a une taille fixe de 25px x 25px.
• un dégradé linéaire pour fournir une couleur unie à gauche du triangle qui provoque l'effet de coupe. Un dégradé est utilisé même s'il produit une couleur unie car nous ne pouvons contrôler la taille, la position de l'arrière-plan que lorsque des images ou des dégradés sont utilisés. Ce gradient est positionné à-25px sur L'axe des abscisses (ce qui signifie essentiellement qu'il se terminerait avant l'endroit où la coupe est présente).
• un autre dégradé similaire à ce qui précède qui produit à nouveau une couleur unie mais est positionné à 25px sur l'axe des Y (encore une fois 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 fonctionnerait que lorsque l'arrière-plan (remplissage) est une couleur unie et qu'il est très difficile pour produire des bordures (mais 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>

Vous pouvez utiliser linear-gradient. Disons que le parent div avait une image d'arrière-plan, et que vous aviez besoin d'un div pour vous asseoir dessus avec un fond gris et un coin gauche à oreilles de chien. Vous pouvez faire quelque chose comme ceci:

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

Voir sur CodePen

Autres lectures:

• CSS Gradients sur CSS-Tricks
• coins biseautés et rayon de bordure négatif avec gradients CSS3

Si vous avez besoin d'une bordure diagonale au lieu d'un coin diagonal, vous pouvez empiler 2 divs avec chacun un pseudo élément:

Démo

Http://codepen.io/remcokalf/pen/BNxLMJ

.container {
  padding: 100px 200px;
  overflow: hidden;
}

div.diagonal {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  float: left;
}

div.diagonal2 {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  background: #da1d00 url(http://www.remcokalf.nl/background.jpg) left top;
  background-size: cover;
  float: left;
}

div.diagonal3 {
  background: #da1d00;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 432px;
  height: 432px;
  padding: 4px;
  position: relative;
  margin: 30px;
  float: left;
}

div.inside {
  background: #fff;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 292px;
  height: 292px;
  padding: 70px;
  position: relative;
}

div.diagonal:before,
div.diagonal2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid transparent;
  width: 0;
}

div.diagonal3:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #da1d00;
  border-right: 80px solid transparent;
  width: 0;
  z-index: 1;
}

div.inside:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  border-top: 74px solid #fff;
  border-right: 74px solid transparent;
  width: 0;
  z-index: 2;
}

h2 {
  font-size: 30px;
  line-height: 1.3em;
  margin-bottom: 1em;
  position: relative;
  z-index: 1000;
}

p {
  font-size: 16px;
  line-height: 1.6em;
  margin-bottom: 1.8em;
}

#grey {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

#grey:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;
  width: 400px;
}

<div id="grey"></div>
<div class="container">
  <div class="diagonal">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner is possible</p>
  </div>
  <div class="diagonal2">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner with background image is possible</p>
  </div>
  <div class="diagonal3">
    <div class="inside">
      <h2>Header title</h2>
      <p>Yes a CSS diagonal border is even possible with an extra div</p>
    </div>
  </div>
</div>

Ce code vous permet de couper des coins de chaque côté du rectangle:

div {
  display:block;
  height: 300px;
  width: 200px;
  background: url('http://lorempixel.com/180/290/') no-repeat;
  background-size:cover;

  -webkit-clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

Http://jsfiddle.net/2bZAW/5552/

Avec une petite modification du code de Joseph, l'élément ne nécessite pas d'arrière-plan solide:

div {
    height: 300px;
    background: url('http://images2.layoutsparks.com/1/190037/serene-nature-scenery-blue.jpg');
    position: relative;
}

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

Http://jsfiddle.net/2bZAW/1921/

Cette utilisation de 'rgba(0,0,0,0)' permet à l'intérieure "coin" pour être invisible .

Vous pouvez également modifier le 4e paramètre 'a', où 0 , pour avoir une ombre de plus d'un "pliée-coin "effet":

Http://jsfiddle.net/2bZAW/1922/ (avec Ombre)

REMARQUE: couleur RVBA les valeurs sont prises en charge dans IE9+, Firefox 3+, Chrome, Safari et dans Opera 10+.

Selon la solution de gradient linéaire de Harry (répondu Oct 14 ' 15 à 9: 55), Il dit que l'arrière-plan d'opacité n'est pas possible, je l'ai essayé et oui, ce n'est pas le cas.

Mais! J'ai trouvé une solution de contournement. Non, ce n'est pas super optimisé, mais ça a marché. Alors voici ma solution. Puisque Harry n'utilise pas de pseudo-élément, nous pouvons y parvenir en créant un.

Définissez la position par rapport au conteneur et créez un pseudo-élément avec les mêmes propriétés de gradient linéaire. En d'autres termes, il suffit de le cloner. Ensuite, mettez un fond transparent pour le conteneur, et disons un fond noir pour le clone. Mettez une position absolue dessus, un z-index de -1 et une valeur d'opacité (ie. 50%). Il va faire le travail. Encore une fois, c'est une solution de contournement et ce n'est pas parfait, mais cela fonctionne très bien.

.cut-corner {
    position: relative;
    color: white;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
    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;
}
.cut-corner:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: -1;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), black calc(50% + 1px)), linear-gradient(black, black), linear-gradient(black, black);
    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 */

div {
  padding: 10px;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

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

Nous avons eu le problème de différentes couleurs de fond pour nos éléments découpés. Et nous ne voulions que le coin supérieur droit und coin inférieur gauche.

body {
 background-color: rgba(0,0,0,0.3)
 
}

.box {
 position: relative;
 display: block;
 background: blue;
 text-align: center;
 color: white;
 padding: 15px;
 margin: 50px;
}

.box:before,
.box:after {
 content: "";
 position: absolute;
 left: 0; 
 right: 0;
 bottom: 100%;
 border-bottom: 15px solid blue;
 border-left: 15px solid transparent;
 border-right: 15px solid transparent;
}

.box:before{
	border-left: 15px solid blue;
}

.box:after{
	border-right: 15px solid blue;
}

.box:after {
 bottom: auto;
 top: 100%;
 border-bottom: none;
 border-top: 15px solid blue;
}


/* Active box */
.box.active{
	background: white;
	color: black;
}



.active:before,
.active:after {
 border-bottom: 15px solid white;
}

.active:before{
	border-left: 15px solid white;
}

.active:after{
	border-right: 15px solid white;
}

.active:after {
 border-bottom: none;
 border-top: 15px solid white;
}

<div class="box">
 Some text goes here. Some text goes here. Some text goes here. Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>
</div>
<div class="box">
 Some text goes here.
</div>
<div class="box active">
 Some text goes here.
 <span class="border-bottom"></span>
</div>
<div class="box">
 Some text goes here.
</div>

Par une petite modification du code de Joshep...Vous pouvez utiliser ce code qui semble être le coin droit plié selon vos besoins.

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 blue;
    width: 0;
}

J'ai récemment coupé le coin supérieur droit et superposé les onglets comme des dossiers. Complétez le code noob, alors ignorez le code merdique, mais je l'ai fait en combinant un carré, un triangle et un rectangle... Cela peut ou peut ne pas être une nouvelle approche, mais j'espère que quelqu'un le trouve utile.

Https://i.stack.imgur.com/qFMRz.png

Voici le HTML:

<!DOCTYPE html>
<html lang ="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css"> 
    </head>
    <body>
        <div class="folders">
            <div class="container">
                <div class="triangleOne">
                    <p class="folderNames">Home</p>
                </div>
                <div class="triangleOneCut">
                </div>
                <div class="triangleOneFill">
                </div>
            </div>

            <div class="container2">
                <div class="triangleOne blue">
                    <p class="folderNames">About</p>
                </div>
                <div class="triangleOneCut blueCut">
                </div>
                <div class="triangleOneFill blue">
                </div>
            </div>

            <div class="container3">
                <div class="triangleOne green">
                    <p class="folderNames">Contact</p>
                </div>
                <div class="triangleOneCut greenCut">
                </div>
                <div class="triangleOneFill green">
                </div>
            </div>
        </div>
    </body>
</html>

Voici le CSS:

.triangleOne {
    height: 50px;
    width: 40px;
    background: red;
    border-radius: 5px 0px 0px 5px;
    position: absolute;
}

.triangleOneCut {
    content: '';
    position: absolute;
    top: 0; left: 40px;
    border-top: 10px solid transparent;
    border-left: 10px solid red;
    width: 0;
}

.triangleOneFill {
    content: '';
    position: absolute;
    top: 10px; left: 40px;
    width: 10px;
    height: 40px;
    background-color: red;
    border-radius: 0px 0px 5px 0px;
}

.container {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    z-index: 3;
}

.container2 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -10px;
    z-index: 2;
}

.container3 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -20px;
    z-index: 1;
}

.blue {
    background-color: blue;
}

.green {
    background-color: green;
}

.blueCut {
    border-left: 10px solid blue;
}

.greenCut {
    border-left: 10px solid green;
}

.folders {
    width: 160px;
    height: 50px;
    /* border: 10px solid white; */
    margin: auto;
    padding-left: 25px;
    margin-top: 100px;
}

.folderNames {
    text-align: right;
    padding-left: 2px;
    color: white;
    margin-top: 1.5px;
    font-family: monospace;
    font-size: 6.5px;
    border-bottom: double 1.5px white;
}