CSS3 거꾸로 된 둥근 모서리

Question

CSS3에서 거꾸로 된 둥근 모서리를 수행하는 방법이 있습니까? 아래의 (원유) 그림의 왼쪽 하단 모서리와 비슷합니다.

/-------\ 
|  | 
|  | 
|  | 
| ______/ 
|/ <---The left side is flush (straight), the slant should be rounded 

아마도 경계 반경은 this technique과 결합 될 수 있습니까?

편집 : 나는 말풍선을 찾고있는 것이 아니라 왼쪽 아래에있는 점의 오른쪽을 커브하는 방법입니다. 당신이 보는 그런 종류를 달성하기 위해 노력하는 경우

Answer 1

글쎄, 이것은 순수한 광기이지만, 확실히을 할 수있는 방법은있다 :-)하지 크로스 browserly하지만, 어디 보자 :

우리의 마크 업 :

<div id="bubble"> 
    <p>This is madness!</p> 
</div> 

우리의 CSS :

#bubble { 
    width:200px; 
    height:100px; 
    border:1px solid #000; 
    -webkit-border-radius:20px; 
    -moz-border-radius:20px; 
    border-radius:20px; 
} 
    #bubble p { 
     margin: 1em; 
     font-family:Comic Sans MS;/* well, madness it is! */ 
    } 
#bubble:before { 
    content:''; 
    border:20px solid; 
    border-color:#fff transparent transparent; 
    position:absolute; 
    top:110px; 
    left:25px; 
    z-index:2; 
} 
#bubble:after { 
    content:''; 
    border:20px solid; 
    border-color:#000 transparent transparent; 
    position:absolute; 
    top:111px; 
    left:25px; 
    z-index:1; 
} 

,

그 결과 http://jsfiddle.net/MrLWY/

는 난 단지 파이어 폭스 3.6.3이 시험, 그러나 아이디어는 여기에 분명 :-)

두 개의 걸릴 수 있습니다 :

#bubble { 
    width:200px; 
    height:100px; 
    border:1px solid #000; 
    position:relative; 
    -webkit-border-radius:20px 20px 20px 0; 
    -moz-border-radius:20px 20px 20px 0; 
    border-radius:20px 20px 20px 0; 
} 
    #bubble p { 
     margin: 1em; 
     font-family:Comic Sans MS; 
    } 
#bubble:before { 
    content:''; 
    width:20px; 
    height:20px; 
    background:#fff; 
    border-left:1px solid #000; 
    position:absolute; 
    top:100px; 
    left:-1px; 
} 
#bubble:after { 
    content:''; 
    -webkit-border-radius:20px 0 0 0; 
    -moz-border-radius:20px 0 0 0; 
    border-radius:20px 0 0 0; 
    border:solid #000; 
    border-width:1px 0 0 1px; 
    width:20px; 
    height:19px; 
    position:absolute; 
    top:100px; 
    left:0; 
} 

그리고 결과를 : http://jsfiddle.net/ajeN7/

아마도 이것은 여러 가지 방법으로 향상 될 수있다 :

• (브라우저가 + 웹킷과 오페라 이상인 경우)
• http://code.google.com/p/ie7-js/과 같이 반올림하지 않고도 IE에서 작동 할 수 있습니다 (생성 된 콘텐츠가 작동하도록).
• 유연한 높이에서 어떻게 작동하는지 알아보십시오.
• 이것은 FF의 효과를 얻을

Answer 2

는 (연설 풍선)은 그냥 :)에 대한 이미지를 사용하는 것이 가장 좋습니다

Answer 3

:-) 폰트 계 선언을 변경한다. 다른 브라우저에는 적절한 border-radius 변형을 사용하십시오. 기본적으로 3 div 시스템을 사용합니다. 하나는 배경색과 동일합니다. 평면 색상의 배경에만 사용할 수 있습니다.

<div class="top">some text here</div> 
<div class="bottom"><div class="bottom2"></div></div> 

그리고 CSS :

Gryzzlys 첫 번째 예는 다른 배경을 처리하지 않았다

body 
    { 
    background-color:red; 
    } 

.top 
    { 
    display: block; 
    width: 200px; 
    height: 50px; 
    background-color:white; 
    padding:5px; 

    -moz-border-radius-topleft:10px; 
    -moz-border-radius-topright:10px; 
    -moz-border-radius-bottomright:10px; 
    } 

.bottom 
    { 
    display: block; 
    width: 20px; 
    height: 20px; 
    background-color: white;  
    } 

.bottom2 
    { 
    display: block; 
    width: 20px; 
    height: 20px; 
    background-color: red; 
    -moz-border-radius-topleft:20px; 
    } 

Answer 4

내가 그래서 여기에 아직 언급하지만, 어차피은 (Gryzzlys 응답에 관해서) 새로운 대답 색상 (배경 및 거품).

하지만 두 번째 것이 있습니다.여기에 적용된 배경 색상 예는 다음과 같습니다

http://jsfiddle.net/tGnfb/

은 (는 파이어 폭스가 아닌 다른 브라우저의 테두리를 렌더링 할 수 있도록 나 또한 국경 반경 속성을 추가).

Answer 5

CSS 만 사용하여이 문제를 해결할 수있는 방법이 있습니다. 나는 탭을위한 기술을 사용하기로 결정했으나 연설 거품에 쉽게 적용 할 수있었습니다.

나는 여기 Inverse Border Radius in CSS (here)을 만드는 방법의 기본 예제를 다룹니다. 이것은 내부를 사용하기 위해 Border 크기의 트릭을 사용합니다. 그러나 가능한 한 볼 수 있듯이 제대로 작동하려면 위치 지정을해야 할 수도 있습니다.