HTML and CSS irregular triangle image gallery - html

Question

I need to create an image gallery, in which the individual images are irregular triangles (emphasis on irregular).
I found limited examples on how to achieve triangle images via html and css, without modifying the images themselves. One example I found in this CodePen https://codepen.io/thebabydino/pen/liDCz was a step in the right direction, but looking at it, I can't find a way to make the images irregular triangles.
The result I am trying to achieve is this:
<div class='pageOption'>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/A.png'>
</a>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/D.png'>
</a>
</div>
This is the basic HTML I will be using and the CSS is:
.pageOption {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 40em;
height: 27em;
}
.option, .option img {
width: 100%;
height: 100%;
}
.option {
overflow: hidden;
position: absolute;
transform: skewX(-55.98deg);
}
.option:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.option:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.option img {
opacity: .75;
transition: .5s;
}
.option img:hover {
opacity: 1;
}
.option img, .option:after {
transform: skewX(55.98deg);
transform-origin: inherit;
}
Mind that the HTML and CSS I have may not be the optimal for my problem. I think the shape of the images I am using (rectangular) have something to do with this.
Would be better if the solution is better supported across browsers.

Answer 1

You can do it with skew like below if you cannot use clip-path:
.box {
overflow: hidden;
width: 200px;
height: 200px;
display:inline-block;
}
.triangle {
width: 100%;
height: 100%;
transform: skewX(-20deg) skewY(45deg); /* 27deg instead of 20deg to have a regular triangle */
transform-origin: bottom left;
overflow: hidden;
background-size:0 0;
}
.triangle.bottom {
transform-origin: top right;
}
.triangle:before {
content: "";
display: block;
width: inherit;
height: inherit;
background-image: inherit;
background-size:cover;
background-position:center;
transform: skewY(-45deg) skewX(20deg); /* We invert order AND signs*/
transform-origin: inherit;
}
.triangle:hover {
filter:grayscale(100%);
}
.adjust {
margin-left:-120px;
}
body {
background:#f2f2f2;
}
<div class="box">
<div class="triangle" style="background-image:url(https://picsum.photos/id/155/1000/800)"></div>
</div>
<div class="box adjust">
<div class="triangle bottom" style="background-image:url(https://picsum.photos/id/159/1000/800)"></div>
</div>