这是一个例子:http://jsfiddle.net/aFEZ8/3/
HTML
<span id="square"></span>
<div id="wrap">
<div></div>
</div>
CSS
#wrap{
position:absolute;
left:100px;
top:100px;
border:solid 1px #000;
width:100px;
height:100px;
-webkit-transform:rotate(33deg);
overflow:hidden;
transform:rotate(33deg);
}
#wrap div{
-webkit-transform:rotate(-33deg);
-webkit-transform-origin:0 0;
transform:rotate(-33deg);
transform-origin:0 0;
height:100%;
width:200%;
border:solid 1px #f00;
cursor:pointer;
position:absolute;
}
#square{
position:absolute;
left:200px;
top:100px;
width:4px;
height:4px;
background:#aaa;
}
如果您尝试将鼠标悬停在灰色方 block 上,您会在 IE 9 和 10 中看到指针,这是错误的。
我应该怎么做才能把事情做好?
最佳答案
经过几个小时的挫折,我找到了一个解决方案:你只需要添加额外的包装器,它没有旋转 - 它正确地剪裁了它的内部元素:http://jsfiddle.net/aFEZ8/4/
If someone thinks it's a good idea to add code here, please feel free to do it.
I think it's superfluous in this case.
有了多个嵌套的旋转容器,并在计算边距和 Angular 上花费了一些精力,就可以制作任意 html 的多边形剪辑,其中光标悬停可以正常工作,IMO 是一个很好的替代不太支持的剪辑 html带有 svg。
更复杂的例子:http://jsfiddle.net/aFEZ8/5/ Chrome 中的脆边(版本 29,Win 7)......哦,好吧。其他现代浏览器(至少是桌面浏览器,包括 Windows 的“最后一个”Safari)没有这个问题。
关于css - 在 IE9 和 IE10 中,旋转的容器不会像预期的那样剪切其旋转的嵌套元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19071018/