1. Home
  2. Css
  3. Clip path

Clip path lets you mask an element using set shapes like circle, ellipse, polygon or a custom path.

#css
<style>
    .clip-image{
        display: inline-block;
        clip-path: polygon(100% 0, 100% 45%, 45% 100%, 0 100%, 0 0);
    }
</style>

<div class="clip-image">
    <img width="200" height="200" src="/assets/icon-512x512.png" alt="Clipped image">
</div>
Output:
Clipped image
copy
Full Css cheatsheet
NordVPN NordVPN