Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document </title> <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; } .box1 { clip-path: none; } .box2 { clip-path: inset(25% 0 25% 0 round 0 25% 0 25%); /* values are from-top, from-right, from-bottom, from-left */ } .box3 { clip-path: circle(50% at 50% 50%); } .box4 { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .box5 { clip-path: ellipse(90px 50px at 100px 100px); } .box6 { clip-path: inherit; } .box7 { clip-path: initial; } .box8 { clip-path: unset; } </style> </head> <body> <h2>Clip-path property example</h2> <div class="container"> <div class="box1">none</div> <div class="box2">inset</div> <div class="box3">circle</div> <div class="box4">polygon</div> <div class="box5">ellipse</div> <div class="box6">inherit</div> <div class="box7">initial</div> <div class="box8">unset</div> </div> </body> </html>