与背景图象的三角形状 [英] Triangle shape with background image

问题描述

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

这里是我的模拟了如何我想要两个三角形。

目前，我只有两个div，跨越900x600，每个三角形作为背景图像。我现在遇到的问题是我不能将鼠标悬停在电影院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 photoid =weddingPhoto>< / a> < a href =＃class =option cinemaid =weddingCinema>< / a>< / div>  

/ div>

解决方案

如果使用子图像来代替背景图片，这很容易。你只需要偏斜两个具有不同变换原点的 .option 元素，然后unskew他们的子图像并设置 overflow：hidden .pageOption 和 .option 元素。支持是好的，应该适用于除IE8 / 7和Opera Mini之外的所有内容。

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％;高度：100％; } 
 .option {
 overflow：hidden; 
 position：absolute; 
 / * arctan（27/40）= 34.01935deg 
 *需要倾斜90deg  -  34.01935deg = 55.98065deg 
 * / 
 transform：skewX（-55.98deg）; 
} 
。选项：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; 
} 
  

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屋！