The web is predominantly rectangular. On the other hand, print media tends to be more varied in shape. Among the many reasons for this difference is a lack of appropriate tools to achieve what we have in print media.
This tutorial will introduce you to clip-path, a property which allows you to prevent a portion of an element from being displayed. The region that is visible is governed by the values you provide. We will begin with the basics, then cover the syntax and later on move to more advanced concepts.
The Basics
Clipping is when we trim a piece from something. In our case, it is an operation which 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 clipping path and clipping region.
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. This has been covered in detail in this SitePoint tutorial.
Also, keep in mind that you do not want to confuse this property with the deprecated clip property which was very restrictive and only supported rectangular clipping.
Syntax and Usage
The correct syntax for using this property is:
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
The syntax values above include:
clip-source will be a URL referencing an internal or external SVG <clipPath> element.basic-shape accepts the basic shape function defined in the CSS Shapes specification.geometry-box is optional. When you provide it along with the basic-shape function, it acts like a reference box for the clipping done by basic-shape. If geometry-box is specified by itself, then it uses the shape of specified box, including any corner shaping (provided by the border-radius property) as the clipping path. We will explore this further soon.
Now, consider the following CSS code which uses the basic shape function:
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
It will clip all the images in the shape of a rhombus. But why are the images being clipped in shape of a rhombus and not a trapezium or parallelogram? It all depends on the value of your vertices. The following diagram illustrates the conventions to be used when you are creating your own polygon shapes for clipping:
The first coordinate of each point determines its location on the x-axis. Similarly, the second point specifies its location on the y-axis. The points are all plotted in a clockwise direction. Consider the rightmost point of our rhombus. It is located half way down the y-axis, so its y coordinate is 50%. It is also located at the extreme right position on the x-axis, so its x coordinate is 100%. Values of all other points can be deduced similarly.
Clipping Elements With geometry-box Values
When you are clipping a HTML element the geometry-box (or reference box) can be any one of the following — margin-box, border-box, padding-box or content-box. The geometry-box value should be used in following manner:
[code language="css"]
.clip-me {
clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
margin: 10%;
}
[/code]
In the case above, the margin-box of our element will be used as a reference to determine the exact location of clipping points. The point (10%, 10%) is the top-left corner of our margin-box and thus our clip-path would be positioned in relation to that point.
In case of SVG elements, it can be fill-box, stroke-box and view-box. The value view-box will use the nearest SVG viewport as a reference box if no view-box is specified.
Uses of clip-path
This property has a lot of interesting uses. Firstly, it can improve our text content. Take a look at the image below. The background behind the headline and the second paragraph was created using clip-path property:
Continue reading %Introducing the CSS clip-path Property%
by Nitish Kumar via SitePoint
