如何在 CSS3 中建立帶有背景圖像的可懸停三角形？

建立具有背景圖像的CSS3 三角形以實現無縫三角形連結

簡介

透過互動式三角形增強網站的美感形狀的連結可以提升其視覺吸引力。使用 CSS3，您可以輕鬆創建這些幾何形狀並合併背景圖像以增加深度和魅力。

透明懸停區域的挑戰

但是，出現了一個常見問題創建三角形時：無法將滑鼠懸停在背景圖像的透明部分上。此障礙會阻止訪客存取底層連結。

解決方案：利用子圖像

要克服此挑戰，請考慮在連結中使用子圖像而不是背景圖像。透過實現這種方法，您可以獨立傾斜父三角形元素，同時保持其子圖像連結的對齊。

代碼實現

以下代碼演示瞭如何實施這個技術：

HTML：

<div>
<p><strong>相關CSS：</strong></p>
<pre class="brush:php;toolbar:false">.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;
}

結論

透過在連結中巧妙地使用子圖像將它們與傾斜的三角形元素對齊，您可以在整個三角形上實現無縫懸停。此技術增強了網站的互動性和視覺吸引力，提供更具吸引力的使用者體驗。