帶有背景圖像的 CSS3 三角形可以處理可點擊的透明區域嗎？

使用背景圖像建立三角形

問題：

設計一個包含兩個三​​角形的網站當嘗試使三角形的透明部分可訪問時，包含背景圖像並用作可點擊連結的元素變得具有挑戰性到點擊次數。這個設計可以使用 CSS3 三角形和背景圖片來實現嗎？

答案：

使用子圖像：

簡化為了保持與大多數瀏覽器的兼容性，解決方法是使用子圖像作為連結而不是背景圖像。此方法涉及使用變換傾斜屬性建立三角形，並偏移子影像以補償傾斜。

步驟：

• 建立容器 div具有適當的尺寸（例如，寬度 900 像素，高度 600 像素）。
• 新增兩個三角形的子 div 並將它們絕對放置在對角線上的變換原點上。
• 根據三角形的高度和寬度計算出每個三角形的特定角度（在本例中為 -55.98 度）。
• 在每個三角形內建立子圖像，並將它們旋轉與其父 div 相同的角度。
• 將兩個容器的溢出屬性設定為隱藏和三角形 div。

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.container {
  overflow: hidden;
  width: 900px;
  height: 600px;
}

.triangle, .triangle img {
  width: 100%;
  height: 100%;
}

.triangle {
  overflow: hidden;
  position: absolute;
  transform: skewX(-55.98deg);
}

.triangle:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}

.triangle:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}

.triangle img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}