Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Titre du document </title> </head> <style> body { margin: 0; padding: 0; background-color: #eee; } .container { display: grid; grid-template-columns: 200px 200px 200px ; grid-template-rows: 200px 200px 200px ; grid-gap: 20px; justify-content: center; } .container div { background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") ; background-position: center; background-size: cover; color: #000; font-size: 18px; font-family: sans-serif; display: flex; justify-content: center; align-items: center; } .example { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } </style> <body> <h2>Exemple de la propriété clip-path</h2> <div class="container"> <div class="example">polygon</div> </div> </body> </html>