圓角隱藏溢出+變換（在Firefox和Safari中，不在Chrome和Opera中）

Question

我嘗試使div蒙版的圓角處的子元素的內容。我對this question表示感謝，但在孩子們轉化時它不起作用。

所以這http://jsfiddle.net/ut2DW/效果很好Firefox和Safari，但無法在Chrome也不歌劇，除非我們消除了變換屬性（調整頁邊距）（！）：

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