Question

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

所以这个http://jsfiddle.net/ut2DW/适用于Firefox和Safari（！），但不适用于Chrome或Opera，除非我们删除转换属性（并调整边距）：

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;
}

圆角隐藏溢出+转换（在Firefox和Safari中确定，不在Chrome或Opera中）

1 个答案: