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

【问题标题】：Rounded corner hide overflow + transform (Ok in Firefox & Safari, not in Chrome nor Opera)圆角隐藏溢出 + 变换（在 Firefox 和 Safari 中可以，在 Chrome 和 Opera 中不行）
【发布时间】：2012-10-31 03:11:05
【问题描述】：

我尝试将 div 的圆角掩码为其子项的内容。感谢this question，我做到了，但是当孩子们变形时它就不起作用了。

所以这个 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 中工作？（哦，拜托，我不想拍照片！）

谢谢！

【问题讨论】：

在上一版 Chrome 中已解决。

标签： html rounded-corners css

【解决方案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;
}

【讨论】：

这是因为旋转，是的！如果有一个像问题中链接的修复，它仍然比添加 bg 图像更好。