CSS Clip Paths

How do you create a clipping shape for an image, as in this example?

There are a number of techniques but the most versatile approach is to use CSS clip paths with SVG.

To do this, place an Embed containing your SVG content, and adapt it to this structure.

Note the element, and its ID, these are important for utilizing the clipPath.

<svg width="0" height="0" aria-hidden="true">
  <defs>
    <clipPath id="cut-corner" clipPathUnits="objectBoundingBox">
      <!-- top-left corner cut off -->
      <path d="
        M0.12 0
        L1 0
        L1 1
        L0 1
        L0 0.12
        Z
      " />
    </clipPath>
  </defs>
</svg>

Then, you can apply the path to your image or other element using CSS. In Webflow you can add this manually to your class as a Custom Attribute, which you will find at the bottom of the style panel.

clip-path: url(#cut-corner);

Examples

https://codepen.io/memetican/pen/YPWwWbY/f9b2c4a2a171f1628b968a2e99d7b2e8

Notes

To my knowledge, external URLs, or pre-uploaded SVGs do not work- this could be a CSS limitation ( like currentColor ) or it could be simply that SVGs typically don't contain the structure. Definitely worth experimenting.

Tools

https://webflow.com/apps/detail/clip-path-bae