둥근 모서리 숨기기 오버플로 + 변형 (Chrome 및 Opera가 아닌 Firefox 및 Safari의 Ok)

Question

div 마스크의 둥근 모서리에 어린이의 내용을 표시하려고합니다. 나는 그것을 this question에게 감사했지만 아이들이 변형되었을 때는 작동하지 않습니다. (!)

그래서이 http://jsfiddle.net/ut2DW/는 크롬이나 오페라에서 파이어 폭스와 사파리에서 잘 작동,하지만 우리는 변환 속성을 제거 (및 여백을 조정)하지 않는 :

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

(더 JSFiddle에서)

CSS를

는

<div> 
    <a href="#"> 
     <span></span> 
    </a> 
</div> 

는 어떻게하면 (적어도) 크롬에서 작동 할 수 HTML? (오 제발, 나는 이미지를 만들고 싶지 않다!)

고마워!

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