- You should have some familiarity with HTML5 , And CSS
- All you need is a computer (Windows, macOS, or Linux) with an internet connection (Windows, macOS, or Linux)
CSS – short for Cascading Style Sheets – is a “programming language” you use to turn your raw HTML pages into real beautiful websites.
Clip-path property is your ticket to shape-shifting the monotonous, boxy layouts traditionally associated with flat, responsive design. You will begin to think outside the box, literally, and hexagons, stars, and octagons will begin to take form on your web pages. Once you get your hands dirty with clip-path, there’s no end to the shapes you can generate, simply by tweaking a few values. While the focus of this article is on clip-path using polygons with CSS, all of the demos provide a reference to an inline SVG, in order to gain additional support on Firefox. Generating a responsive SVG clipped shape is trivial once you have created a responsive shape with CSS’ clip-path. We’ll look at this in detail later.
clip-path makes it easy to clip-out basic shapes using either of the polygon, ellipse, circle, or inset keywords, which are part of the CSS exclusion module.
Polygon is the most flexible of all the available shapes because it allows you to specify any amount of points, a little bit like an SVG path. The provided points are pairs of X and Y coordinates that can be of any unit (eg: pixel or percent-based). Because it’s the most flexible, it’s also the most complex and you’ll probably want to use a tool to define your points.
Clipping is when we trim a piece from something. In our case, it is an operation that allows us to completely or partially hide elements on a web page. Two other concepts that relate to clipping which we will use in this article are the clipping path and clipping region.
The clipping path is the path we use to clip an element, it marks out our clipping region. It can be a basic shape or a complex polygonal path. The clipping region then includes all the area enclosed within the clipping path.
Anything outside the clipping region is clipped by the browsers. This not only includes backgrounds and other such content but also borders, text-shadows, and so on. Moreover, browsers won’t capture any events like hover or click outside an element’s clipping region.
Even though our specific element is now non-rectangular, the content around the elements flows exactly the way it would have if the element had its original shape. To make the surrounding elements flow according to the shape of the clipped element, you will have to use the shape-outside property.
- CSS Basic shapes from the “CSS Shapes Module” provide a convenient way to use clip-path. The different shapes available are polygon, circle, ellipse, and inset; inset is for rectangular shapes.
- with SVG One can, alternatively, create a shape using SVG and then clip an element to this shape via the URL syntax. There are two ways to do this:
- with a reference to an inline SVG (i.e. the SVG markup exists on the page itself),
- with a reference to an external SVG document. In both cases, the clipPath element within the SVG is used to wrap the element that determines the clipping path, be it a circle, polygon, path, or another element. Compare the demo below in Firefox and in a WebKit or Blink browser such as Chrome to spot the differences. Square images imply a lack of browser support. Note: The third image does not show up in Safari. Despite extensive debugging, I’m unable to resolve the issue. I’d appreciate a note in the comments section if you come across the solution.