HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 350px; height: 200px; background-color: #fff; clip-path: inset(10% 52% 0px 27px); } button{ display: block; } </style> </head> <body> <h1>CSS clip-path Property</h1> <img src="emotion.jpg"> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("img")[0]; function myFunction(){ x.style.clipPath = "inset(10% 9% 0px 175px)"; } </script> <p><strong>Note</strong>: Click on the button to clip the image.</p> </body> </html>
OUTPUT
×

Save as Private