Languages
[Edit]
EN

CSS - clip: rect() style property example

13 points
Created by:
AnnLen
13480

In this article, we would like to show how to use clip: rect() style property (CSS property).

Quick solution:

position: absolute;  /* <------ clip property requires absolute or fixed position */
     
/* edges:  top_edge,  right_edge,  bottom_edge,  left_edge */
clip: rect(65px,      142px,       142px,        36px);

 

To work with clip property take into account a few things:

  • clip: rect() hides unwanted element parts - similar to visibility: hidden but on the part of the element,
  • clip property works with position: absolute and position: fixed properties, so it is necessary to use too.

clip property main concept is visualized on the picture:

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;  /* <------ clip property requires absolute or fixed position */
        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 CSS clip property.
Used image with CSS clip property.

CSS

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join