带背景图像的三角形 [英] Triangle shape with background image

问题描述

我正在做一个项目，需要两个三角形来保存背景图像，并作为链接.

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

目前，我只有两个跨越 900x600 的 div，每个三角形作为背景图像.我现在遇到的问题是我无法将鼠标悬停在 Cinema div 的透明部分上以到达照片 div.

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

是否可以使用 css3 三角形，如果可以，有人可以帮我编写代码吗?

这是我目前拥有的.

.pageOption {位置:相对；宽度:900px；高度:600px；}.pageOption .photo {位置:绝对；顶部:0px；左:0px；宽度:900px；高度:600px；背景: url('../images/menuPhoto.png') 不重复 0 0;}.pageOption .cinema {位置:绝对；底部:0px；右:0px；宽度:900px；高度:600px；背景: url('../images/menuCinema.png') 不重复 0 0;}

<a href="#" class="option photo" id="weddingPhoto"></a><a href="#" class="option Cinema" id="weddingCinema"></a>

解决方案

如果您使用子图像而不是背景图像作为链接，这真的很容易.您只需要倾斜具有不同变换原点的两个 .option 元素，然后取消它们的子图像并在 .pageOption 上设置 overflow: hidden和 .option 元素.支持很好，应该适用于除 IE8/7 和 Opera Mini 之外的所有内容.

演示

结果:

HTML:

</a></a>

相关CSS:

.pageOption {溢出:隐藏；位置:相对；宽度:40em；高度:27em；}.option, .option img { 宽度:100%;高度:100%；}.选项 {溢出:隐藏；位置:绝对；/*反正切(27/40)= 34.01935度* 需要倾斜 90deg - 34.01935deg = 55.98065deg*/变换:skewX(-55.98deg);}.option:first-child {左:-.25em；变换原点:100% 0；}.option:last-child {右:-.25em；变换原点:0 100%；}.option img {变换:skewX(55.98deg);变换原点:继承；}

I am working on a project that calls for two triangles to hold background images, and be links.

Here is my mock up for how I would like the two triangles.

Currently, I have just two divs that span the 900x600 with each triangle as a background image. The issue I am having now is I can't hover over the transparent part of the Cinema div to reach the photo div.

Can I accomplish this design with css3 triangles and set their background images? I always thought the custom shape is made up from a border, with a border-color.

Is it possible to do with css3 triangles, and if so, can someone help me with the code?

Here is what I currently have.

.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>

解决方案

It's really easy if you use child images for the links instead of background images. You just need to skew the two .option elements with different transform origins, then unskew their child images and set overflow: hidden on both .pageOption and the .option elements. Support is good, should work for everything except IE8/7 and Opera Mini.

DEMO

Result:

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>

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

这篇关于带背景图像的三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！