Is something like this even possible in CSS? [closed] - css

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
Is it possible to make 2 picture overlap this way ?
Imagine you have 2 images both like 60% of the resulting image. They should overlap, but by a diagonally cutout.

Answer 1

Either you use CSS Masking or you play around with CSS3 transform rotate:
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
You would rotate one inner container by say 45 degrees and the image inside that container by -45 degrees to make it straight again. The result is a diagonal border. Add z-index and absolute positioning and you got your result.
Here's a demo.
.container {
width: 500px;
height: 200px;
margin: 50px;
overflow:hidden;
position: relative;
border: 2px solid #666;
}
.img1 {
border-right: 2px solid #666;
position: absolute;
width: 300px;
height: 600px;
overflow: hidden;
left: -75px;
top: -230px;
z-index: 2;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.img1 img {
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.img2 {
position: absolute;
width: 350px;
overflow: hidden;
left: 150px;
z-index: 1;
}
<div class="container">
<div class="img1"><img src="http://lorempixel.com/output/city-q-c-600-300-7.jpg" /></div>
<div class="img2"><img src="http://lorempixel.com/output/city-q-c-600-300-10.jpg" /></div>
</div>