如何使用 CSS 创建带有背景图像的三角形图像？-css教程-PHP中文网

如何使用 CSS 创建带有背景图像的三角形图像？

Mary-Kate Olsen

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

原创

1132 人浏览过

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

登录后复制

此方法提供了一种更干净的解决方案，并改进了支持不同浏览器，不包括 IE8/7 和 Opera Mini。

以上是如何使用 CSS 创建带有背景图像的三角形图像？的详细内容。更多信息请关注PHP中文网其他相关文章！