圓角隱藏隱藏溢出+變換（在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;
}​