html - 圆角隐藏溢出 + 变换（在 Firefox 和 Safari 中可以，在 Chrome 和 Opera 中不行）

Question

我尝试使 div 的圆角掩码其子项的内容。感谢这个问题，我做到了，但是当孩子们被改造时它不起作用。

所以这个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;
}​