帶有背景圖像的 CSS3 三角形可以處理可點擊的透明區域嗎？-css教學-PHP中文網

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

Mary-Kate Olsen

發布： 2024-11-14 15:57:02

原創

280 人瀏覽過

Can CSS3 Triangles with Background Images Handle Clickable Transparent Areas?

使用背景圖像建立三角形

問題：

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

答案：

使用子圖像：

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

步驟：

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

HTML:

<div>

登入後複製

CSS:

.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;
}

登入後複製

以上是帶有背景圖像的 CSS3 三角形可以處理可點擊的透明區域嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！