CSS Clip Path

CSS clip path is a CSS property, by means of which a sectional area of ​​a CSS element can be defined. In this way, CSS clip paths enable the display of elements in many different geometrical shapes without the graphic file having to be edited beforehand. The basic forms are scalable vector graphic (SVG).

Background

Originally, only rectangular elements could be created with CSS. This meant that the display of CSS elements were always output by browsers in geometrically similar shapes. With the “border-radius” property, elements with rounded corners could be displayed on websites but custom forms were not possible. Nowadays, elements can be shaped practically in any shape you like with the CSS3 property “clip path.” It was previously impossible with CSS, to present elements in any other way than with rectangular boundaries. The well-established “border-radius” property allowed rounded corners which thus enabled one to create a round basic shape, however, more complex shapes were impossible. With the CSS3 property “clip-path,” complex clipping paths can be utilized which can also be defined by SVG graphic.

Options

With CSS clip path, four basic forms, i.e. rectangular, elliptical, circular, or polygonal shapes can be created.

Two examples:

• Rectangle: In this example, measuring 10 by 50 pixels, the corners are rounded with 5 pixels (vertical and horizontal radius).

img {
  clip-path: rectangle (10px, 10px, 50px, 50px, 5px, 5px);
}

• Circle: This circle is formed from the center (100px for X- and Y-axis) and the radius (third value).

img {
  clip-path: circle (100px, 100px, 50px);
}

In conjunction with the masks, the created shapes can additionally be masked with CSS clip path. The result will be completely individual display options. To achieve this, the coordinates are saved in an SVG image, which is then integrated into an HTML document with its own ID. The corresponding clip-path element then forms the frame.

And passed on here as ID.

img {
  clip-path: url(#form);
}

The transparency of the colors can also be defined with masking. An example for a custom shape and corresponding codes can be found here

Benefits for SEO

Using CSS clip path, you can define individual shapes for graphics without having to customize graphics files. The advantage is that the basic graphic can be easily indexed as itself. More diverse possibilities in web design also ensure that a website is distinguishable and its appearance can be a unique selling point. The great advantage of clip paths is that the technique can be used perfectly for responsive design as part of mobile optimization since units can be specified in relation, as a percentage, for example. At the same time, it’s easier to do using the basic shapes. To date, CSS clip path is supported in conjunction with an SVG mask only by Mozilla Firefox and Chrome recognizes the basic geometric shapes. Internet Explorer users receive neither one nor the other variation.

Web Links

• Clip Path
• CSS SVG Clipping
• Clip Path Element
• Creating Responsive Shapes with Clip Path