EN
CSS - clip: rect() style property example
13 points
In this article, we would like to show how to use clip: rect()
style property (CSS property).
Quick solution:
xxxxxxxxxx
1
position: absolute; /* <------ clip property requires absolute or fixed position */
2
3
/* -------------------- edges -------------------- */
4
/* top_edge, right_edge, bottom_edge, left_edge */
5
clip: rect( 65px, 142px, 142px, 36px );
To work with clip
property take into account a few things:
clip: rect()
hides unwanted element parts - similar tovisibility: hidden
but only on the part of the element,clip
property works withposition: absolute
andposition: fixed
properties, so it is necessary to add it.
clip
property main concept is visualized on the picture:
Practical example:
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
body {
7
position: relative;
8
border: 1px solid black;
9
height: 150px;
10
}
11
12
.original-image {
13
width: 150px;
14
height: 150px;
15
}
16
17
.cropped-image {
18
position: absolute; /* <------ clip property requires absolute or fixed position */
19
left: 150px;
20
width: 150px;
21
height: 150px;
22
23
/* -------------------- edges -------------------- */
24
/* top_edge, right_edge, bottom_edge, left_edge */
25
clip: rect( 65px, 142px, 142px, 36px );
26
}
27
28
</style>
29
</head>
30
<body>
31
<img class="original-image" src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
32
<img class="cropped-image" src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
33
</body>
34
</html>
Used resources: