帶有背景圖像的三角形：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'>
</a>
<a href='#' class='option' data-inf='cinema'>
<img src='../images/menuCinema.png'>
</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中文網其他相關文章！
