Lightbox avec élément HTML details et CSS shapes


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla, nunc vel volutpat faucibus, lectus enim mattis lorem, sed malesuada justo dolor vel dui. Duis tellus nulla, tristique et elit suscipit, hendrerit venenatis nibh. Morbi vel scelerisque sem, ut consequat odio. Donec vehicula ex nec molestie tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla, nunc vel volutpat faucibus, lectus enim mattis lorem, sed malesuada justo dolor vel dui. Duis tellus nulla, tristique et elit suscipit, hendrerit venenatis nibh. Morbi vel scelerisque sem, ut consequat odio. Donec vehicula ex nec molestie tincidunt.

✔️ Support navigateurs :

Chrome Edge firefox Internet Explorer Opera Safari iOS Safari UC Browser Samsung Internet
Chrome-logo Edge Browser-logo firefox-logo Internet Explorer-logo Opera-logo Safari-logo iOS Safari-logo UC Browser-logo Samsung Internet-logo
✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
55+ / 54+ / 42+ 7+ (avec préfixe) 7.1+ (avec préfixe) 11.8 (avec préfixe) 4+ (avec préfixe)


<details>
<summary></summary>
<div class="contenu-fenetre">
</div>
</details>




/* reset */

*{box-sizing:border-box}
body{margin:0}


/* reset */


details { 

background: #7A5FFF;
clip-path: polygon(calc(50% - 3em ) calc(50% - 1.5em ),calc(50% + 3em ) calc(50% - 1.5em ), calc(50% + 3em ) calc(50% + 1.5em ), calc(50% - 3em ) calc( 50% + 1.5em ));
color: white;

}
	
details summary{

cursor:pointer; 
display: grid;
place-items: center;
text-transform: uppercase;

	
	}
	
summary:before{

padding: 1rem;
content:'ouvrir'
	
	}
	
details[open] summary:before{ 
	
z-index: 2;
font-size: 3rem;
content: '❌';
position: absolute;
top: 0;
right: 0
	
}
	
details[open]  {

transition: clip-path .4s cubic-bezier(0, 0.58, 0.36, 1);	
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%)
	
}
	
.contenu-fenetre {
opacity: 0;
transform: translate3d(0, -1rem, 0);
transition: opacity .1s 0, transform .3s 0;



}	
	
details[open] .contenu-fenetre {

max-width: 50vw;
margin: auto;
opacity: 1;
transform: translate3d(0, 1rem, 0);
transition: opacity .3s .2s, transform .6s .2s cubic-bezier(0, 0.65, 0.06, 0.98);

 }