Make Introducing the CSS clip-path Property

View: 1764    Dowload: 0   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

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-radiusproperty) 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:

Clipping Polygon diagram

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-boxborder-boxpadding-box or content-box. The geometry-box value should be used in following manner:

.clip-me {
  clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
  margin: 10%;

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 ourclip-path would be positioned in relation to that point.

In case of SVG elements, it can be fill-boxstroke-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-pathproperty:

clip-path examples

You can easily create the first background using gradients and other such techniques. However, it would be a lot harder to create the second one without the help of clip-path. Note that the line at the bottom of that message-like background is not perfectly horizontal, it is a bit oblique. To achieve this result withclip-path you need only a single line of CSS:

.p-msg {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);

The background has seven vertices and it is reflected in our polygon’s clip-path. How did I come up with those co-ordinates you ask? I’ll leave that to the reader to figure out — doing so will help you have a better understanding of the concepts. Play around with the CodePen below to get the hang of it:

You can also clip images into different shapes with this property and arrange them together in cool ways with the help of a little CSS. The image thumbnails in your galleries no longer need to be rectangular and the user avatars can have any shape that you wish. In this tutorial, we will arrange images in the shape of a rhombus. Since all images have the same basic rhomboid shape they will use the same clip-pathvalue. Here is the CSS for rightmost image:

.right {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: relative;
  top: -352px;
  left: 256px;

Adding Animation

This property is also able to be animated. The only thing that you have to keep in mind is that the number of vertices in the final and initial shape must be the same. This makes sense because otherwise the browser won’t know where to add that extra vertex (or where to remove it from). Here is some CSS to animate a trapezium:

@keyframes polygons {
  25% {
    clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);
  50% {
    clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);
  70% {
    clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);

In the final phase of the animation, the trapezium changes into a triangle. As I mentioned earlier, we can’t change the number of vertices and expect the animation to be smooth. Changing the number of vertices will make the transition abrupt. To resolve this issue, I have set the first two vertices in the last polygon in such a way that they coincide. This way our quadrilateral transforms nicely into a triangle.


Browser Support

This property is not supported by IE and Edge. Firefox only supports clip-path partially (it only supports the url() syntax). However, from version 47 onward, Firefox supports this property with thelayout.css.clip-path-shapes.enabled flag enabled.

Chrome, Safari and Opera require the prefix -webkit- in order to work properly. Unfortunately, even they don’t support shapes in external SVGs. You can read more about browser support on Can I Use.


Make Introducing the CSS clip-path Property

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.

Posted on 07-06-2016 


To comment you must be logged in members.

Files with category

File suggestion for you
File top downloads
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd