EN
CSS - clip: rect() style property example
13
points
In this article clip: rect()
style property is described.
The most important things are:
clip: rect()
hides unwanted part of element - something likevisibility: hidden
for part of element,clip
property works withposition: absolute
andposition: 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
orposition: fixed
properties because of clipped elementposition
property.
Main concept of how clip
property cutting has been described below:

// 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:
