Trying to create rounded corners for a div to mask its children's content led me to a solution I found in this question. However, it appears that the solution does not work when the children elements are transformed.
The following http://jsfiddle.net/ut2DW/ works perfectly in Firefox and Safari, but unfortunately, it does not display correctly in Chrome and Opera unless the transforms property is removed (and margins adjusted):
Here is a snippet of the CSS code (find more details in the JSFiddle link):
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);
}
And here is the HTML code snippet:
<div>
<a href="#">
<span></span>
</a>
</div>
Is there a way to make this code work in Chrome, at the very least? (I really don't want to resort to using an image!)
Thank you in advance!