dcsimg
 

Submitted by: Octavia Anghel(octaviaanghel@gmail.com)

Wednesday Sep 19th 2018 by Octavia Anghel

Language: Web, Expertise: Beginner - Clipping is another powerful feature in the CSS arsenal. Learn more about how to use it.

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%);
} 
Home
Mobile Site | Full Site