CSS3倒圓角落

有沒有辦法在CSS3中做一個倒圓的角落，類似於下面（原始）圖形中的左下角？CSS3倒圓角落

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

也許邊界半徑可以結合this technique？

編輯：我不是在尋找講話泡泡，而只是一種曲線左下角右側的方法。

來源

2010-05-29 VirtuosiMedia

我也可以推薦這個教程，它顯示了倒置的邊框，因爲它們用於製表符：http://css-tricks.com/better-tabs-with-round-out-borders/ – 2012-04-28 14:16:38

好了，這是純粹的瘋狂，但肯定有辦法做到這一點:-)不交叉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/

我只在Firefox 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/

也許這可以在許多方面得到加強：

使它跨瀏覽器（+ webkit和歌劇，至少）
它可以在IE瀏覽器，沒有圓整，但在類似http://code.google.com/p/ie7-js/（爲了生成內容的工作）的幫助下工作。
瞭解如何使用靈活的高度。
改變FONT-FAMILY聲明:-)

來源

2010-05-29 19:30:37

+1感謝gryzzly。這不是我正在尋找的東西，但它是一種非常酷的技術。請參閱我的編輯。 – VirtuosiMedia 2010-05-29 22:06:12

拿兩個：http://jsfiddle.net/ajeN7/ :-) – 2010-05-29 22:17:30

非常好！謝謝！不過，我不確定你爲什麼要改變漫畫。它是網絡上最漂亮的字體之一。 ;-) – VirtuosiMedia 2010-05-29 22:49:42

，如果你想達到那種樣子的（談話氣球），最好只是用圖像爲:)

來源

2010-05-29 19:16:33 corroded

圖像isn'這是一個問題，但我具體問是否可以使用CSS3。 – VirtuosiMedia 2010-05-29 19:27:39

這實現了在FF的效果。對其他瀏覽器使用適當的border-radius變體。本質上你使用一個3 div系統，一個具有相同的背景顏色。只適用於平面顏色的背景。

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

而CSS：

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

來源

2010-05-29 22:18:50 nico

我不能發表評論還，但這裏有一個新的答案（關於Gryzzlys答案）：

Gryzzlys第一個例子沒有處理不同的背景顏色（用於背景和泡泡）。

但第二個呢。下面是應用了背景顏色的例子：

http://jsfiddle.net/tGnfb/

（我還加邊界半徑屬性，以便將呈現爲其他瀏覽器比Firefox邊界）。

來源

2011-02-03 12:47:26 MPV

這是一個絕妙的想法，但不幸的是，它不會工作，如果頁面有一個背景圖像。 – 10basetom 2012-10-18 07:54:22