Question

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

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

这可以通过使用边框属性的CSS样式来完成。但是使用边框属性时，透明边框仍然位于另一个顶部，因此我无法正确跟踪鼠标单击/悬停事件。也就是说，如果Div A的z-index大于Div B并且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上以查看事件是否符合形状。我快速了解了CSS的其余部分，但是你明白了......

哦，请注意，倾斜div的内容在相反的方向上倾斜，以使其显示，好，不会倾斜。

trapezium divs与鼠标事件

1 个答案: