与背景图象的三角形状

Question

我正在开发一个项目,需要两个三角形来保存背景图像,并且是链接.

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

目前,我只有两个跨越900x600的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>

Answer 1

如果您使用子图像作为链接而不是背景图像,这真的很容易.您只需要.option使用不同的变换原点来扭曲这两个元素,然后将它们的子图像展开并设置overflow: hidden在元素.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;
}

Answer 2

您可以通过几种方法实现此布局。这是使用内嵌svg和clip-path元素的示例：

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="top">
      <polygon points="0 0, 9.9 0, 0 6.6" />
    </clipPath>
    <clipPath id="bottom">
      <polygon points="10 0.1, 10 6.7, 0.1 6.7" />
    </clipPath>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)"/>
  <image xlink:href="http://i.imgur.com/5NK0H1e.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)"/>
</svg>