css – 具有背景图像的三角形状

我正在处理一个需要两个三角形来保存背景图像的项目，并且是链接。

这是我想要的两个三角形的模拟。

目前，我只有两个跨越900×600的div，每个三角形作为背景图像。我现在遇到的问题是，我不能将它悬停在Cinema div的透明部分，以达到照片div。

我可以用css3三角形完成这个设计，并设置它们的背景图像吗？我一直认为自定义形状是由边框组成的，具有边框颜色。

是否可以使用css3三角形，如果是，有人可以帮助我的代码？

这是我目前拥有的。

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}
.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}
.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}

<div class="pageOption">
  <a href="#" class="option photo" id="weddingPhoto"></a>
  <a href="#" class="option cinema" id="weddingCinema"></a>
</div>

解决方法

如果您使用儿童图像进行链接而不是背景图像，这很简单。您只需要使用不同的变换源偏移两个.option元素，然后取消他们的子图像，并设置overflow：隐藏在.pageOption和.option元素上。支持是好的，除了IE8 / 7和Opera Mini以外的所有功能都应该工作。

DEMO

结果：

HTML：

<div class='pageOption'>
  <a href='#' class='option' data-inf='photo'>
    <img src='../images/menuPhoto.png'>
  </a>
  <a href='#' class='option' data-inf='cinema'>
    <img src='../images/menuCinema.png'>
  </a>
</div>

相关CSS：

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em; height: 27em;
}
.option,.option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}
.option img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}