html - 圆 Angular overflow hidden + 转换(在 Firefox 和 Safari 中正常，在 Chrome 和 Opera 中无效)

Question

我尝试使 div 的圆 Angular 掩盖其子元素的内容。我做到了感谢this question , 但当 children 变形时它不起作用。

所以这个http://jsfiddle.net/ut2DW/在 Firefox 和 Safari(!)中运行良好，但在 Chrome 和 Opera 中运行良好，除非我们删除 transforms 属性(并调整边距):

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

<div>
    <a href="#">
        <span></span>
    </a>
</div>

如何让它在(至少)Chrome 中运行？ (哦，拜托，我不想制作图像!)

谢谢!

Answer 1

我猜这是由于 transform: rotate(45deg);

我不知道为什么它也不起作用..如果你删除它，它会如你所愿..

我建议你添加一个背景图片而不是旋转

span {
    display: block;
    margin: 22px 0 0 22px;
    width: 100px;
    height: 100px;
    background: #000 url(../img/black-triangle.png) no-repat;
}​