Search code examples
csssvgcss-transformsclip-path

How to draw a rectangle with an angled corner in SVG

I'm using a clip path from an inline SVG to mask images with different aspect ratios on a website. The mask should hide the right bottom corner at a fixed angle (-15deg).

I cannot achieve that the right corner always stays at an angle, independently of the aspect ratio of the masked image.

My current SVG looks like this:

<svg height="0" width="0" viewBox="0 0 1 1" preserveAspectRatio="none">
   <defs>
      <clipPath id="clipRight" clipPathUnits="objectBoundingBox">
         <rect x=0 y=0 width=1 height=0.5 /> 
         <rect x=0 y=0.5 width=1 height=0.5 transform="skewX(-15)" /> 
      </clipPath>
   </defs>
</svg>

and the css code looks like this:

.img-clip-right {
   clip-path: url(#clipRight);
}

The clip path should look like this

rectangle sample

I there a way to draw a line at a specific angle to the bottom end of the svg canvas without knowing the exact image dimension and without using javascript?

Solution

  • I don't quite understand why an SVG and masking is required.

    This snippet just applies the clip path to the images.

    It takes a corner off at 15degrees of the same area regardless of the size or aspect ratio of the image as the amount to be taken off is not specified in the question:

    .clipped {
  --x: 100px;
  --tan15: 0.267949192;
  --y: calc(var(--tan15) * var(--x));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--y)), calc(100% - var(--x)) 100%, 0 100%);
}
    <img class="clipped" src="https://picsum.photos/id/1015/200/300">
<img class="clipped" src="https://picsum.photos/id/1015/300/300">
<img class="clipped" src="https://picsum.photos/id/1015/300/200">