Imagine a scenario where there is a parent div named "clip" and a child div named "page." These two divs have specific dimensions, as shown below:
<div id="clip">
<div id="page">
<!-- Content/Images here -->
</div>
</div>
https://i.sstatic.net/CDR9Q.png
The height and width of these two divs are as follows:
#clip {
height: 1000px;
width: 1414px;
}
#page {
height: 1000px;
width: 707px;
}
Now, the challenge at hand is to skew a side off from the child div at an angle ø and clip the right side of the div, creating a visual effect like this:
https://i.sstatic.net/3MkqP.png
Is it possible to achieve this using solely CSS?
Note that we cannot use the triangular border hack or skew the content inside the #page child
div. We are looking for a clean CSS solution without any hacks. Can CSS3 transformations help us achieve this effect?
@ksav has suggested a solution that involves obscuring part of the div with a pseudo :before element positioned absolutely. However, this approach does not fully meet our requirements as we aim to make the clipped part of div#page completely disappear, resulting in a design similar to this: