三角形图像

Question

我想要将两个直角三角形图像放在一起（例如纯色）：

我可以想到几种方法来做到这一点：

1. 划分背景图像，并将它们放在每个图像的顶部 其他
2. 与上述类似的方法，但使用图像而不是div

问题来自于我希望能够在每个三角形上悬停（并点击）并让它改变它的状态（例如悬停时改变颜色）。

我的上述两个解决方案都会产生问题，其中一个在另一个上面，我无法点击或悬停在另一个上面。我想用CSS形状做这个，但那些通常涉及边框，我不知道如何将图像叠加在那些上。

我需要能够通过CSS和HTML完成此操作，理想情况下没有图像映射。

Answer 1

另一个选择是使用css skew：

你的HTML：

<div class="img-container">
   <img src="http://www.natureasia.com/common/img/splash/thailand.jpg" />
</div>
<div class="img-container">
   <img src="http://www.worddive.com/blog/wp-content/uploads/2014/06/nature-and-environment-course.jpg"/>
</div>

css：

.img-container, .img-container img { width: 100%; height: 100%; }
.img-container {
  overflow: hidden;
  position: absolute;
  transform: skewX(-68deg);
}
.img-container:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.img-container:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}
.img-container img {
  transform: skewX(68deg);
  transform-origin: inherit;
}

对于方形图像，它可能会更好用，但是你可以使用skew，直到看起来正确。

查看此Fiddle或转动the other way

同样，不是100％肯定浏览器兼容性。如果您需要保证所有浏览器都能正确呈现，您可能最好使用图像。

Answer 2

这是你想要的吗？

编辑：我没有注意到有类似方法的另一个答案，如果答案窗口打开了一段时间，抱歉。

.container {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.triangle {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  overflow: hidden;
}

.triangle:hover {
  border: 1px solid red;
}

.top_right {
  transform: skewX(45deg);
  transform-origin: 0 0;
}

.top_right img{
  transform: skewX(-45deg);
  transform-origin: 0 0;
}

.bottom_left {
  transform: skewX(45deg);
  transform-origin: 0 100%;
}
.bottom_left img{
  transform: skewX(-45deg);
  transform-origin: 0 100%;
}

<div class="container">
  <div class="triangle top_right">
    <img src="http://www.avatarsdb.com/avatars/spongebob_happy.jpg">
  </div>
  <div class="triangle bottom_left">
    <img src="http://www.avatarsdb.com/avatars/say_cheese.jpg">
  </div>
</div>