带有背景图像的 CSS3 三角形可以处理可点击的透明区域吗？

使用背景图像创建三角形

问题：

设计一个包含两个三角形的网站当尝试使三角形的透明部分可供点击时，包含背景图像并用作可点击链接的元素变得具有挑战性。这个设计可以使用 CSS3 三角形和背景图像来实现吗？

答案：

使用子图像：

简化为了保持与大多数浏览器的兼容性，解决方法是使用子图像作为链接而不是背景图像。此方法涉及使用变换倾斜属性创建三角形，并偏移子图像以补偿倾斜。

步骤：

• 创建容器 div具有适当的尺寸（例如，宽度 900 像素，高度 600 像素）。
• 为三角形添加两个子 div，并将它们绝对定位，变换原点位于对角。
• 将每个三角形倾斜特定的角度根据三角形的高度和宽度计算的角度（在本例中为 -55.98deg）。
• 在每个三角形内创建子图像，并将它们旋转与其父 div 相同的角度。
• 设置容器和三角形 div 的溢出属性均隐藏。

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.container {
  overflow: hidden;
  width: 900px;
  height: 600px;
}

.triangle, .triangle img {
  width: 100%;
  height: 100%;
}

.triangle {
  overflow: hidden;
  position: absolute;
  transform: skewX(-55.98deg);
}

.triangle:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}

.triangle:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}

.triangle img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}