如何建立帶有背景圖像的 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中文網其他相關文章！