0

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!

Community
  • 1
  • 1
Joan
  • 659
  • 2
  • 7
  • 20

1 Answers1

0

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;
}​
silviomoreto
  • 5,629
  • 3
  • 30
  • 41
  • This _is_ because of the rotate, yes! And if there's a fix like the one in the question linked, it's still better than adding a bg image. – Joan Oct 31 '12 at 01:28