clip-path – Part 1
What better introduction than two quotes from MDN and Bennett Feely:
The clip-path CSS property prevents a portion of an element from getting displayed by defining a clipping region to be displayed, i.e. only a specific region of the element is displayed. The clipping region is a path specified as a URL referencing an inline or external SVG, or shape method such as circle(). The clip-path property replaces the now deprecated clip property.
The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
Fig. No, this is not a curious multiplication puzzle but three images generated with clip-paths at Clippy. Left: A star (ten-point polygon) with a red background colour. Centre: A small cross (twelve-point polygon). An idea for a closing box? Right: A circle with a background image (a composite image of Pluto, as it were).
The HTML
<div></div> /* Per shape */The CSS
#star {
width: 112px;
height: 112px;
background-color: #900;
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
#cross {
width: 24px;
height: 24px;
background-color: #475f14;
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
#circle {
width: 112px;
height: 112px;
background-image: url("path/to/image.jpg");
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}