三角形状与背景图像三角形状与背景图像(Triangle shape with background

我的工作对呼吁两个三角形持有背景图片，并链接项目。

这是我模拟了对我怎么想的两个三角形。

目前，我刚才两个div跨越每个三角形作为背景图像的900x600。 我现在遇到的问题是我不能在电影院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有不同的变换起源元素，那么unskew他们的孩子图片，并设置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和夹路径元件 ：

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

Answer 3:

这里是我的CSS的建议：

1. 使用帆布这是HTML5的标签，而不是跨浏览器。
2. 使用SVG 。 （最可靠的一个）
3. 使用CSS3过渡旋转并覆盖它隐藏溢出的包装。 同样是不跨浏览器。

旋转过渡：

-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome 
   -moz-transform: rotate(7.5deg);  /* FF3.5+ 
    -ms-transform: rotate(7.5deg);  /* IE9 
     -o-transform: rotate(7.5deg);  /* Opera 10.5 
        transform: rotate(7.5deg);
           filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 
                   M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');

Answer 4:

正如你所说，CSS3 tringles由边界的，所以你可以不重视的背景给他们。

我建议你只使用两个PNG文件在另一个上，为了听点击事件，并创建一个基于鼠标位置的正确操作使用JS。

还有一个WebKit的面具CSS属性，但它在其他浏览器（我用了一个小pageing起球技巧非常不支持- http://jsfiddle.net/xTNTH/3/ -最好的探险之旅[没有JS只CSS] - http://snag.gy/7fRNq.jpg ）

文章来源: Triangle shape with background image