Rounded corner hide overflow + transform (Ok in Firefox & Safari, not in Chrome nor Opera)

Question

I try to make rounded-corner of a div mask the content of its children. I did it thank to this question , but it doesn't work when the children is transformed.

So this http://jsfiddle.net/ut2DW/ works well in Firefox and Safari (!), but not in Chrome nor Opera, unless we remove the transforms property (and adjust margins) :

CSS (more in 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>

How can I make it works in (at least) Chrome? (Oh please, I don't wanna make an image!)

Thanks!

Answer 1

I guess it is due the transform: rotate(45deg);

I don't know why it doesn't work too.. If you remove it works as you desire..

I suggest you to add a background image instead of the rotate

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