Languages
[Edit]
EN

CSS - clip: rect() style property example

13 points
Created by:
AnnLen
1885

In this article clip: rect() style property is described.

The most important things are:

  • clip: rect()¬†hides unwanted part of element - something like¬†visibility: hidden for part of element,
  • clip property works with position:¬†absolute and¬†position:¬†fixed properties, so it is necessary to use¬†too,
  • after clipping it is necessary set position of clipped element,
  • container element (if is used) should have¬†position: relative,¬†position: sticky,¬†position:¬†absolute¬†or¬†position:¬†fixed¬†properties¬†because of clipped element position property.

Main concept of how clip property cutting has been described below:

clip: rect() style property explanation.
clip: rect() style property explanation.
// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    body {
    	position: relative;
        border: 1px solid black;
        height: 150px;
    }

    .oryginal-image {
    	width:  150px;
      	height: 150px;
    }
    
    .cropped-image {
        position: absolute; /* required property for clip */
        left: 150px;
        width:  150px;
      	height: 150px;
      
        /* edges:  top_edge,  right_edge,  bottom_edge,  left_edge */
        clip: rect(65px,      142px,       142px,        36px);
    }

  </style>
</head>
<body>
  <img class="oryginal-image" 
       src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
  <img class="cropped-image" 
       src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
</body>
</html>

Used resources:

Used image with clip property.
Used image with clip property.
Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join