javascript - 带有鼠标事件的梯形 div

Question

所以我想要一个像这样的div结构。

______________________________________
|          \                          |
|           \                         |
|            \                        |
|  Div A      \      Div B            |
|              \                      |
|               \                     |
|________________\____________________|

这可以通过使用边框属性的 css 样式来完成。但是使用边框属性，透明边框仍然在另一个的顶部，所以我无法正确跟踪鼠标单击/悬停事件。也就是说，如果 Div A 的 z-index 大于 Div B 并且鼠标点击事件发生在 A 的 trans of A 上，则点击注册发生在 Div A，而不是 Div B。但我希望它发生在 Div B 上。

______________________________________
|        |\ trans|                    |
|        | \ of A|                    |
|        |  \    |                    |
|  Div A |   \   |   Div B            |
|        |    \  |                    |
|        |trans\ |                    |
|________|_of_B_\|____________________|

对使用 CSS 或 Javascript 或 jQuery 有帮助吗？

Answer 1

这是一个 Demo使用 css3 转换...

.skewed.box{
    -moz-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    transform: skewX(20deg);
}

将鼠标悬停在 div 上可以看到事件跟随形状。我 quickNdirty 剩下的 CSS，但你明白了......

哦，请注意倾斜的 div 的内容向相反的方向倾斜以使其看起来没有倾斜。