HTML and CSS irregular triangle image gallery

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 triangl

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>