dcsimg
LinkedIn
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Beginner
Sep 19, 2018

Using the CSS Clip Property

CSS clipping is another powerful feature. The shape's edge is called the clip-path, and clipping shows what image area should be visible. Clipping is about hiding what normally would be drawn. Below are two examples of a clip-path: one is a polygon in the shape of star and one is a circle:

/* Star */
.polygon {
   clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* circle */
.circle {
   clip-path: circle(50%);
} 
Octavia Anghel
 
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date