三角形状带有背景图像

Question

我正在处理一个需要两个三角形来承载背景图片并且作为链接的项目。

以下是我对这两个三角形的草图。

目前，我只有两个div，它们跨越了900x600，每个三角形都是背景图像。现在我遇到的问题是，我无法悬停在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>

- Ryan

---

尝试使用CSS pointer-events 属性。 - Ram

Answer 1

如果你使用子图片而不是背景图片作为链接，那么这非常容易。你只需要用不同的变换原点扭曲两个 .option 元素，然后取消扭曲它们的子图片，并在 .pageOption 和 .option 元素上设置 overflow: hidden。支持良好，应该适用于除了 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%; 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;
}

- Ana

---

继Ana的回答之后，如果容器的宽度需要是灵活的，你可以在窗口大小改变时使用javascript计算角度，具体方法请参考这个回答：https://dev59.com/jmzXa4cB1Zd3GeqPY-iH#14200600 - Zach Esposito

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>

- web-tiki

Answer 3

一个使用 CSS clip-path 的响应式的想法。

.pageOption {
  height: 100vh;
  position: relative;
}

.pageOption .photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 5px;
  bottom: 5px;
  background: url('https://picsum.photos/id/1068/900/900') center/cover;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.pageOption .cinema {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 0;
  bottom: 0;
  background: url('https://picsum.photos/id/1055/900/900') center/cover;
  clip-path: polygon(100% 100%, 100% 0, 0 100%);
}
.pageOption a:hover {
  filter:grayscale(1);
}

body {
  margin: 0;
}

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

- Temani Afif

Answer 4

这里是我的CSS建议：

1. 使用不跨浏览器的HTML5标签canvas。
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');

- Tooraj Jam

Answer 5

正如你所说，css3三角形是由边框构成的，因此无法将背景附加到它们上面。

我建议您只使用两个PNG图像叠加在一起，并使用js来监听单击事件并根据鼠标位置创建正确的操作。

还有一个webkit-mask css属性，但在其他浏览器中支持度非常低（我用它来制作了一个小页面效果 - http://jsfiddle.net/xTNTH/3/ - 在safari上最好[仅限css而无需js] - http://snag.gy/7fRNq.jpg）

- Oren Roth