CSS clip property is a little tricky to understand with its cordinate system. Personally, it was definitely not simple. So let's rethink this concept and make it easier.

The thing is, all clip coordinates specified from the top-left corner of the element to be clipped. And in some cases, it's hard to get it right, especially if you look through position-absolute thinking, where each value started from its own side.

  clip: rect(top, left, right, bottom);

As you can see on the Pen above, I use a different concept. For simplicity, just imagine a clip property based on points like this.

  clip: rect([start_point], [clip_size]);

Both variables consist of two coordinates, so the only thing you need is to set the Start Point (top, left) and Clip Size (height, width).

As a result, I've created the following mixin to demonstrate all this stuff.

  @mixin clip($top, $left, $clip-height, $clip-width) {
  $A: $top;
  $D: $left;
  $B: $D + $clip-width;
  $C: $A + $clip-height;
  clip: rect($A, $B, $C, $D);
}

Easy!


2,739 5 21