[英]Rounded corner hide overflow + transform (Ok in Firefox & Safari, not in Chrome nor Opera)
I try to make rounded-corner of a div mask the content of its children. 我尝试使div蒙版的舍入角变为其子元素的内容。 I did it thank to this question , but it doesn't work when the children is transformed.
感谢这个问题 ,我这样做了,但是当孩子们变身时,它不起作用。
So this http://jsfiddle.net/ut2DW/ works well in Firefox and Safari (!), but not in Chrome nor Opera, unless we remove the transforms property (and adjust margins) : 因此,此http://jsfiddle.net/ut2DW/在Firefox和Safari(!)中效果很好,但在Chrome或Opera中却不能,除非我们删除了transforms属性(并调整了边距):
CSS (more in JSFiddle) CSS(更多信息请参见JSFiddle)
div {
position: absolute;
}
a {
display: block;
overflow: hidden;
-webkit-border-radius: 0 0 20px 0;
border-radius: 0 0 20px 0;
}
span {
display: block;
transform: rotate(45deg);
}
HTML 的HTML
<div>
<a href="#">
<span></span>
</a>
</div>
How can I make it works in (at least) Chrome? 如何使它至少在Chrome中工作? (Oh please, I don't wanna make an image!)
(哦,拜托,我不想拍张照片!)
Thanks! 谢谢!
I guess it is due the transform: rotate(45deg);
我猜这是由于
transform: rotate(45deg);
I don't know why it doesn't work too.. If you remove it works as you desire.. 我不知道为什么它也不起作用。
I suggest you to add a background image instead of the rotate 我建议您添加背景图片而不是旋转
span {
display: block;
margin: 22px 0 0 22px;
width: 100px;
height: 100px;
background: #000 url(../img/black-triangle.png) no-repat;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.