YogeshChauhan.com

clip and clip-path properties in CSS

March 27, 2021

clip CSS property (deprecated)

We can use clip property to show only a portion of any element for e.g. an image.

We can apply clip property only to elements with position property set to fixed or absolute.

We can clip the element in the shape of a rectangle using rect(top corner, right corner, bottom corner, left corner).

We can not clip element if the overflow property has been set as visible as its like telling browsers to do two completely opposite things.

The clip property still works but it won’t work forever. Try to use clip-path property instead.

clip-path CSS property

clip-path property is a newer and better version of clip.

With the clip-path property we can clip/show different shaped regions, not just a rectangle.

The biggest advantage of clip-path property is that it works really well with svg elements which just boost our imagination.

clip-path CSS property Examples

clip-path-circle-50

clip-path: circle(40%)

clip-path:ellipse

clip-path:polygon

Checkout some really good SVG clip-path examples on MDN.

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

The Differences Between HAVING Clause and WHERE Clause in SQLSQL/MySQLSome Useful Operators in The SQL WHERE ClauseSQL/MySQLHow to display and animate image on scroll using JavaScript?JavaScript6 Different Functions to Sort Arrays in PHPPHPSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscWordPress: How to display slider repeater fields in ACF?WordPressIntroduction to components and templates Part 3: Data bindingAngularMIN, MAX, COUNT, AVG and SUM in SQLSQL/MySQLWhat is Hoisting in JavaScript?JavaScriptKilling A Project Part 1: What criteria should be used to cancel/kill a project?MiscModules and its Core features in JavaScriptJavaScriptLearn to Make a Simple Contact Us Form using PHP and PDO-MySQLPHP