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-indexed под ним, на два пиксела шире, на два пиксела выше, на один пиксель над ним, на один пиксель влево и на желаемый цвет границы. К сожалению, всегда будут проблемы с кросс-браузером, особенно с округлением. Это никогда не будет выглядеть совершенно правильно.