HTML和CSS不规则三角形图片库 [英] HTML and CSS irregular triangle image gallery

问题描述

我需要创建一个图片库，其中的每个图像都是不规则的三角形(强调不规则的三角形).

I need to create an image gallery, in which the individual images are irregular triangles (emphasis on irregular).

我发现了一些有关如何通过html和css实现三角形图像而不修改图像本身的有限示例.我在此CodePen中找到了一个示例 https://codepen.io/thebabydino/pen/liDCz 是朝着正确方向迈出的一步，但纵观它，我找不到使图像形成不规则三角形的方法.

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>

这是我将要使用的基本HTML，而CSS是:

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;
}

请注意，我拥有的HTML和CSS可能不是解决我的问题的最佳选择.我认为我正在使用的图像的形状(矩形)与此有关.

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.

推荐答案

如果无法使用剪切路径，则可以使用如下所示的偏斜来实现:

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>

这篇关于HTML和CSS不规则三角形图片库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！