테두리가 단색 인 CSS 삽입 테두리 반경

Question

여기에서와 같이 방사형 그라데이션을 사용하여 인세 트/거꾸로 된 테두리를 만들 수 있음을 알고 있습니다. : Inset border-radius with CSS3,하지만 결과물 주위에 1px의 단색 테두리를 그릴 수 있는지 알고 싶습니다. 이 이미지처럼 모양 : 만 또한 테두리로 반전 하단 왼쪽 반경을 원하지 않는

, 나머지 공간 내부의 배경색은 투명해야한다. CSS3 및 HTML (캔버스 또는 SVG에 관심이 없습니다)이 가능합니까?

Answer 1

데모 :

http://jsfiddle.net/j8gUA/1/

마크 업 :

<figure></figure> 

는 스타일 :

figure{ 
    position:relative; 
    width:200px; 
    height:120px; 
    margin:100px auto; 
    overflow:hidden; 
    border:1px solid black; 
    border-right:none; 
    border-bottom:none; 
    border-bottom-left-radius: 5px; 
    border-top-left-radius: 5px; 
} 
figure:before,figure:after{ 
    content: ''; 
    position: absolute; 
} 
figure:before{ 
    right: -50%; 
    top: 0; 
    background: transparent; 
    width: 172px; 
    height: 200px; 
    border: 1px solid black; 
    border-radius: 100%; 
    box-shadow: 0 0 0 100em red; 
} 
figure:after{ 
    left: -1px; 
    bottom: 0px; 
    height: 16px; 
    width: 128px; 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 5px; 
    border-left: 1px solid black; 
    border-bottom: 1px solid black;  
} 

Answer 2

CSS를 사용하여 복잡한 모양 (http://css-tricks.com/examples/ShapesOfCSS/)을 만드는 것이 매우 유용하고 보람있는 반면 테두리가 필요하면 이제이 방법을 포기하고 이미지를 사용해야합니다. 확실히 아래에 z- 색인 된 모양의 클론을 사용할 수 있습니다. 두 개의 픽셀이 더 넓고, 두 개의 픽셀이 더 크고, 한 개의 픽셀이 위쪽에 있고, 한 개의 픽셀이 왼쪽에 있고, 원하는 테두리 색상이 있습니다. 불행히도, 특히 반올림을 할 때 크로스 브라우저 문제는 거의 발생하지 않습니다. 절대로 옳지 않습니다.