如何使用 CSS 創建帶有背景圖像的三角形圖像？-css教學-PHP中文網

如何使用 CSS 創建帶有背景圖像的三角形圖像？

Mary-Kate Olsen

發布： 2024-11-10 19:28:02

原創

1133 人瀏覽過

How to Create Triangular Images with Background Images Using CSS?

使用CSS 創建帶有背景圖像的三角形圖像

在這個專案中，我們的目標是創建兩個帶有充當連結的背景圖像的三角形圖像。設計模型以特定的排列方式顯示這些三角形：

[帶有背景圖像的三角形圖像的圖像]

最初，我們嘗試使用div 並將背景圖像應用於它們來實現此目的。然而，這種方法在將滑鼠懸停在圖像的透明部分上以到達底層連結時提出了挑戰。

帶有背景圖像的 CSS3 三角形：可行的解決方案

是的，可以實現本設計使用CSS3三角形並設定其背景圖像。自訂形狀確實是使用具有指定邊框顏色的邊框建立的。

帶有背景圖像的CSS3 三角形的程式碼實現

這裡是使用CSS 實現帶有背景圖像的三角形圖像所需的程式碼：

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}

.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}

.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}

登入後複製

使用子影像和傾斜變換的替代方法

另一種方法是使用子圖像作為連結而不是背景圖像。這涉及使用不同的變換原點傾斜 .option 元素，恢復其子圖像的傾斜，以及在 .pageOption 和 .option上設定溢位：隱藏

HTML:

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

登入後複製

CSS:

CSS:此方法種更乾淨的解決方案，並改進了支援不同瀏覽器，不包括IE8/7 和Opera Mini。

以上是如何使用 CSS 創建帶有背景圖像的三角形圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！