如何创建带有背景图像的 CSS3 三角形并确保可点击性？

带有背景图像的三角形

在项目中，您需要两个三角形来充当链接并保存背景图像。问题在于无法将鼠标悬停在一个三角形的透明部分上以访问其后面的链接。以下是如何使用 CSS3 三角形和背景图像实现此设计：

CSS3 三角形不能仅使用边框创建，边框仅允许矩形形状。相反，您可以使用子图像作为链接而不是背景图像。下面是改进后的代码：

<div class="pageOption">
  <a href="#" class="option" data-inf="photo">
    <img  src="/static/imghwm/default1.png" data-src="../images/menuPhoto.png" class="lazy" alt="如何创建带有背景图像的 CSS3 三角形并确保可点击性？" >
  </a>
  <a href="#" class="option" data-inf="cinema">
    <img  src="/static/imghwm/default1.png" data-src="../images/menuCinema.png" class="lazy" alt="如何创建带有背景图像的 CSS3 三角形并确保可点击性？" >
  </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;
}

此解决方案利用倾斜变换属性来创建 CSS3 三角形。然后，选项内的图像不会倾斜，以补偿倾斜的容器。通过将容器和选项上的溢出设置为隐藏，图像保留在各自区域的边界内。

以上是如何创建带有背景图像的 CSS3 三角形并确保可点击性？的详细内容。更多信息请关注PHP中文网其他相关文章！