Effet d’angle plié CSS fond transparent

J’ai ce code pour le coin plié en utilisant CSS:

body { background-color: #e1e1e1 } .note { position: relative; width: 480px; padding: 1em 1.5em; margin: 2em auto; color: #fff; background: #97C02F; overflow: hidden; } .note:before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 16px 16px 0; /* This sortingck side-steps a webkit bug */ border-style: solid; border-color: #fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */ background: #658E15; /* For when also applying a border-radius */ display: block; width: 0; /* Only for Firefox 3.0 damage limitation */ /* Optional: shadow */ -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); } .note.red { background: #C93213; } .note.red:before { border-color: #fff #fff #97010A #97010A; background: #97010A; } .note.blue { background: #53A3B4; } .note.blue:before { border-color: #fff #fff transparent transparent; background: transparent; } .note.taupe { background: #999868; } .note.taupe:before { border-color: #fff #fff #BDBB8B #BDBB8B; background: #BDBB8B; }

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ulsortingces vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ulsortingces vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Maintenant, en action, cela a fonctionné, mais dans le coin supérieur, je vois white fond white . comment supprimer fond blanc et remplacer par transparent .

DEMO ICI

La seule façon d’obtenir de la transparence (ou de l’imiter) en utilisant l’approche actuelle consisterait à définir une border-color de border-color identique à la background-color d’ background-color la page. En effet, le code utilise l’astuce de bordure pour créer l’effet plié. Toutefois, cette approche n’est pas très utile lorsque l’arrière-plan de la page est une image ou un dégradé en soi (en réalité, pas une couleur unie).

Dans de tels scénarios, cet effet peut être créé à l’aide d’une combinaison d’arrière linear-gradient plan à linear-gradient , comme dans l’extrait de code ci-dessous. Ici, une combinaison de trois linear-gradient est utilisée et ils sont comme suit:

Un dégradé linéaire (incliné vers le bas à gauche) pour produire l’effet plié. Ce dégradé a une taille fixe de 16 pixels sur 16 pixels. ( Remarque: nous pouvons déplacer ce dégradé linéaire vers un pseudo-élément, comme dans la version box-shadow au bas de cette réponse, mais le conserver dans le parent laisse un pseudo-élément pour une autre utilisation.)
Un dégradé linéaire pour fournir une couleur unie à gauche du sortingangle qui provoque l’effet plié. Nous utilisons un dégradé même s’il produit une couleur unie, car nous ne pouvons contrôler la taille de l’arrière-plan que lorsque des images ou des dégradés sont utilisés. Ce dégradé est positionné à -16 pixels sur l’axe des X (ce qui signifie qu’il se terminerait avant l’emplacement du sortingangle plié).
Un autre dégradé similaire à celui ci-dessus produit à nouveau une couleur unie mais est positionné à 16 pixels de haut sur l’axe des Y (de nouveau pour laisser de côté la zone occupée par le sortingangle plié).

C’est très complexe mais cela peut être réactif, peut supporter plusieurs couleurs et arrière-plans non solides également. Pour utiliser différentes couleurs pour le conteneur ou la zone pliée, modifiez simplement les couleurs du dégradé. Le premier forme la zone pliée et le rest forme la couleur du conteneur.

 body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } .note { position: relative; width: 320px; padding: 1em 1.5em; margin: 2em auto; color: #fff; background: linear-gradient(to bottom left, transparent 50%, #658E15 50%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%); background-size: 16px 16px, 100% 100%, 100% 100%; background-position: 100% 0%, -16px 0%, 100% 16px; background-repeat: no-repeat; overflow: hidden; } /* Just for demo */ .note { transition: all 1s; } .note:hover { width: 480px; }

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ulsortingces vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ulsortingces vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Css span

En utilisant un élément span ( .fold ), je crée une bordure supplémentaire à droite du div.
Ensuite, j’ai ajouté des pseudo-classes au .fold manière à .fold un flou plus sombre sur l’élément corner.

 body { margin: 20px; } .fold { position: absolute; top: 15px; right: -15px; width: 15px; height: calc(100% - 15px); background-color: inherit; } .fold::before { content: ""; position: absolute; top: -15px; border-top: 15px solid transparent; border-left: 15px solid firebrick; } .fold::after { content: ""; position: absolute; top: -15px; border-top: 15px solid transparent; border-left: 15px solid black; opacity: 0.5; } .note { background-color: firebrick; padding: 25px; position: relative; width: 400px; }

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia lorem vel purus scelerisque tincidunt. Nulla semper magna eget mauris semper, vel viverra urna lacinia. Maecenas feugiat molestie ante a faucibus. Donec mollis pulvinar nisi, pretium ullamcorper dui molestie lacinia. Quisque arcu massa, sollicitudin nec magna quis, tempus pulvinar est. Integer non consectetur quam. Sed nulla quam, luctus ut elit sit amet, sagittis condimentum nisi. In quis ipsum tellus. Proin in imperdiet felis. Vestibulum ante ipsum primis in faucibus orci luctus et ulsortingces posuere cubilia Curae; Integer venenatis, nunc non congue pellentesque, diam enim consectetur libero, vitae fermentum lectus risus vitae ligula. Donec sortingstique sollicitudin mi quis condimentum. In eget diam viverra, elementum nisi vitae, euismod elit. Nulla facilisi. Nullam et odio efficitur, rutrum orci sit amet, convallis ante. Nulla metus lorem, euismod non ante mollis, facilisis egestas arcu. Sed arcu tortor, lacinia a nibh sed, laoreet iaculis arcu. Quisque vel lacus ut felis ornare molestie a eget purus. Cras est elit, euismod sit amet magna ut, cursus auctor erat. Proin eu ante lorem.