CSS clip Property
The clip property only applies to absolutely positioned elements and defines how much of the element is clipped and hence not visible.
Possible Values
- shape - in CSS 2.1 value must be rect followed by four length values in brackets which define a rectangular clipping region.
- auto - no clipping takes place - this is the default value.
- inherit - the value is inherited from the parent element.
Code Example
div{position: absolute; clip: rect(20px, 300px, 90px, 40px);}
The four values set in order the top, right, bottom and left edges of the clipped region but take care because the left and right lengths are both calculated from the left edge and the top and bottom lengths are both calculated from the top edge. Taking the above example the four values mean:
- 20px - clip 20 pixels from the top edge of the element
- 300px - clip the right of the element starting 300 pixels from the left edge of the element
- 90px - clip the bottom edge of the element starting 90 pixels from the top edge of the element
- 40px - clip 40 pixels from the left of the element
Below you can see the clip property in action. The outer blue coloured box is a containing <div>
with a position:relative declaration which is needed to enable absolute positioning of the
<div>'s it contains - (as explained on the css position property page).
The two inner white and grey boxes both have the same width, height and positioning declarations:
{position: absolute; top: 10%; left:10%; width: 50% height: 100px;}
The innermost(grey) box also has the clip code from the example above:
{clip: rect(20px, 300px, 90px, 40px);}