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

帶有背景圖像的三角形：CSS3 方法

使用CSS3 可以實現創建兩個帶有用作鏈接的背景圖像的三角形的目標三角形。雖然您最初認為自訂形狀需要帶有邊框顏色的邊框，但也可以採用不同的方法。

使用子影像的解決方案

不要依賴背景影像，而是考慮使用子影像三角形的影像。此技術涉及使用不同的變換源來傾斜 .option 元素。為了防止最終結果中出現任何明顯的傾斜，請取消子映像的傾斜並對 .pageOption 和 .option 元素套用「overflow: hide」。這種方法提供了廣泛的瀏覽器相容性，除了 IE8/7 和 Opera Mini。

HTML 結構

<div class="pageOption">
  <a href="#" class="option" data-inf="photo">
    <img  src="../images/menuPhoto.png" alt="如何使用 CSS3 創建帶有背景圖像的三角形？" >
  </a>
  <a href="#" class="option" data-inf="cinema">
    <img  src="../images/menuCinema.png" 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;
  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 創建帶有背景圖像的三角形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！