clip-path-experiment

by Richard Hunter

HTML

<div class="background"></div>
<div class="banner"></div>
<div class="article">
  The clip-path property
The clip-path css property defines a clipping region for an element hiding parts of the element outside of the border of the region. The region can be defined using a shape function or by refererence to an SVG clip path. It is the latter method that we are concerned with here.

According to the spec, the clippath can be either an inline SVG or an external SVG file; however external SVGs are not currently supported by most browsers.

The basic concept is quite simple: an SVG clip path element defines a path which is referenced by an html element via the clip-path property. The path is used to form the clipping region. In practise however, clipping paths can be quite tricky to work with. Take the following example which was taken from Codepen.

The clip-path property
The clip-path css property defines a clipping region for an element hiding parts of the element outside of the border of the region. The region can be defined using a shape function or by refererence to an SVG clip path. It is the latter method that we are concerned with here.

According to the spec, the clippath can be either an inline SVG or an external SVG file; however external SVGs are not currently supported by most browsers.

The basic concept is quite simple: an SVG clip path element defines a path which is referenced by an html element via the clip-path property. The path is used to form the clipping region. In practise however, clipping paths can be quite tricky to work with. Take the following example which was taken from Codepen.
According to the spec, the clippath can be either an inline SVG or an external SVG file; however external SVGs are not currently supported by most browsers.

The basic concept is quite simple: an SVG clip path element defines a path which is referenced by an html element via the clip-path property. The path is used to form the clipping region. In practise...

CSS

.article {
  background: pink;
  padding: 20px;
  margin: auto;
  width: 500px;
  box-sizing: border-box;
  margin-top: 43px;
}

.banner {
  
  position: fixed;
  top: 3px;
  left: 20px;
  right: 20px;
  height: 60px;
  background: red;
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% 100%, 
    calc(50% + 250px) 100%, 
    calc(50% + 250px) 40px, 
    calc(50% - 250px) 40px, 
    calc(50% - 250px) 100%, 
    0 100%);
}



.background {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: solid 3px blue;
}