带有背景图像的三角形：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;
}此 CSS 配置有效地倾斜三角形，同时恢复其子图像的倾斜，从而产生所需的三角形形状，并在透明区域上具有可悬停性。可以调整三角形位置和变换原点以获得不同的三角形大小和方向。
以上是如何使用 CSS3 创建带有背景图像的三角形？的详细内容。更多信息请关注PHP中文网其他相关文章！
